<template>
  <div>
    <!-- 编辑页面的表单和数据展示等内容 -->
    <el-tabs v-model="activeName" class="custom-tabs" @tab-click="handleClick">
      <el-tab-pane label="样地信息" name="first">
        <div class="view" :style="{ maxHeight: height + 'px' }">
          <el-descriptions :column="3" border>
            <el-descriptions-item label="样地编号"><el-input v-model="ndPlots.originalPlotId" placeholder="样地编号"
                :readonly="button !== '新增数据'" /></el-descriptions-item>
            <el-descriptions-item label="调查日期">
              <el-date-picker v-model="ndPlots.surveyDate" placeholder="请选择日期" style="width: 100%" type="date"
                format="yyyy-MM-dd" value-format="timestamp" :clearable="false" />
            </el-descriptions-item>
            <el-descriptions-item label="调查/监管人"><el-input v-model="ndPlots.projectLeader"
                placeholder="调查/监管人" /></el-descriptions-item>
            <el-descriptions-item label="记录人"><el-input v-model="ndPlots.recorder"
                placeholder="记录人" /></el-descriptions-item>
            <el-descriptions-item label="课题负责人"><el-input v-model="ndPlots.investigator"
                placeholder="课题负责人" /></el-descriptions-item>
            <el-descriptions-item label="生态系统类型"><el-input v-model="ndPlots.ecosystemCategory"
                placeholder="生态系统类型" /></el-descriptions-item>
            <el-descriptions-item label="生态系统类型/植被型或亚型"><el-input v-model="ndPlots.ecosystemTypeVegetation"
                placeholder="生态系统类型/植被型或亚型" /></el-descriptions-item>
            <el-descriptions-item label="群系或群系组"><el-input v-model="ndPlots.vegetationGroup"
                placeholder="群系或群系组" /></el-descriptions-item>
            <el-descriptions-item label="群丛名称"><el-input v-model="ndPlots.communityName"
                placeholder="群丛名称" /></el-descriptions-item>
            <el-descriptions-item label="经度（°）">
              <el-input-number v-model="ndPlots.longitude" :precision="6" :controls="false"
                style="width: 100%;text-align: left;"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="纬度（°）">
              <el-input-number v-model="ndPlots.latitude" :precision="6" :controls="false"
                style="width: 100%;text-align: left;"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="海拔（m）">
              <el-input-number v-model="ndPlots.elevation" :controls="false"
                style="width: 100%;text-align: left;"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="调查地点"><el-input v-model="ndPlots.location"
                placeholder="调查地点" /></el-descriptions-item>
            <el-descriptions-item label="地形地貌"><el-input v-model="ndPlots.topography"
                placeholder="地形地貌" /></el-descriptions-item>
            <el-descriptions-item label="坡向"><el-input v-model="ndPlots.slopeDirection"
                placeholder="坡向" /></el-descriptions-item>
            <el-descriptions-item label="坡位"><el-input v-model="ndPlots.slopePosition"
                placeholder="坡位" /></el-descriptions-item>
            <el-descriptions-item label="坡度"><el-input v-model="ndPlots.slopeDegree"
                placeholder="坡度" /></el-descriptions-item>
            <el-descriptions-item label="干扰程度"><el-input v-model="ndPlots.disturbanceLevel"
                placeholder="干扰程度" /></el-descriptions-item>
            <el-descriptions-item label="干扰类型"><el-input v-model="ndPlots.disturbanceType"
                placeholder="干扰类型" /></el-descriptions-item>
            <el-descriptions-item label="人工种植">
              <el-radio-group v-model="ndPlots.artificialPlanting">
                <el-radio label="是">是</el-radio>
                <el-radio label="否">否</el-radio>
              </el-radio-group>
            </el-descriptions-item>
            <el-descriptions-item label="乔木层">
              <el-radio-group v-model="ndPlots.treeLayer">
                <el-radio label="是">是</el-radio>
                <el-radio label="否">否</el-radio>
              </el-radio-group>
            </el-descriptions-item>
            <el-descriptions-item label="灌木层">
              <el-radio-group v-model="ndPlots.shrubLayer">
                <el-radio label="是">是</el-radio>
                <el-radio label="否">否</el-radio>
              </el-radio-group>
            </el-descriptions-item>
            <el-descriptions-item label="草本层">
              <el-radio-group v-model="ndPlots.herbLayer">
                <el-radio label="是">是</el-radio>
                <el-radio label="否">否</el-radio>
              </el-radio-group>
            </el-descriptions-item>
            <el-descriptions-item label="苔藓地衣层">
              <el-radio-group v-model="ndPlots.mossLichenLayer">
                <el-radio label="是">是</el-radio>
                <el-radio label="否">否</el-radio>
              </el-radio-group>
            </el-descriptions-item>
            <el-descriptions-item label="地表特征"><el-input v-model="ndPlots.surfaceFeatures"
                placeholder="地表特征" /></el-descriptions-item>
            <el-descriptions-item label="土壤类型"><el-input v-model="ndPlots.soilType"
                placeholder="土壤类型" /></el-descriptions-item>
            <el-descriptions-item label="土壤质地"><el-input v-model="ndPlots.soilTexture"
                placeholder="土壤质地" /></el-descriptions-item>
            <el-descriptions-item label="土壤测定">
              <el-radio-group v-model="ndPlots.soilMeasurement">
                <el-radio label="是">是</el-radio>
                <el-radio label="否">否</el-radio>
              </el-radio-group>
            </el-descriptions-item>
            <el-descriptions-item label="其它记录"><el-input v-model="ndPlots.otherNotes"
                placeholder="其它记录" /></el-descriptions-item>
          </el-descriptions>
        </div>
      </el-tab-pane>

      <el-tab-pane label="草本样方" name="second" style="min-height: 35px;">
        <el-button type="primary" size="small" class="addyf" @click="handherbs">新增样方</el-button>
        <el-tabs v-model="herbsval" :tab-position="tabPosition" @tab-remove="removeTab" closable>
          <template v-for="index in ndHerbsList.length">
            <el-tab-pane :label="'样方-' + index" :name="'cb_' + index">
              <div class="view1" :style="{ maxHeight: height + 'px', overflowY: 'auto' }">
                <div class="top1">
                  <el-descriptions :column="3" border>
                    <el-descriptions-item label="样地编号"><el-input v-model="syncPlotId" placeholder="样地编号"
                        readonly /></el-descriptions-item>
                    <el-descriptions-item label="草本样方编号"><el-input v-model="ndHerbsList[index - 1].herbQuadratId"
                        placeholder="草本样方编号" /></el-descriptions-item>
                    <el-descriptions-item label="调查年">
                      <el-date-picker v-model="surveyDate" placeholder="请选择日期" style="width: 100%" type="year"
                        format="yyyy" value-format="yyyy" :clearable="false" />
                    </el-descriptions-item>
                    <el-descriptions-item label="样方记录人"><el-input v-model="ndHerbsList[index - 1].quadratRecorder"
                        placeholder="样方记录人" /></el-descriptions-item>
                    <el-descriptions-item label="课题负责人"><el-input v-model="ndHerbsList[index - 1].projectLeader"
                        placeholder="课题负责人" /></el-descriptions-item>
                    <el-descriptions-item label="生态系统类型"><el-input v-model="ndHerbsList[index - 1].ecosystemType"
                        placeholder="生态系统类型" /></el-descriptions-item>
                    <el-descriptions-item label="样方面积"><el-input v-model="ndHerbsList[index - 1].quadratAreaM2"
                        placeholder="样方面积" /></el-descriptions-item>
                    <el-descriptions-item label="总盖度%"><el-input v-model="ndHerbsList[index - 1].totalCoveragePct"
                        placeholder="总盖度%" /></el-descriptions-item>
                    <el-descriptions-item label="草层高度cm"><el-input v-model="ndHerbsList[index - 1].layerHeightCm"
                        placeholder="草层高度cm" /></el-descriptions-item>
                    <el-descriptions-item label="多度级" :span="3"><el-input
                        v-model="ndHerbsList[index - 1].abundanceLevel" placeholder="多度级" /></el-descriptions-item>
                    <el-descriptions-item label="注明" :span="3"><el-input v-model="ndHerbsList[index - 1].notes"
                        placeholder="注明" type="textarea" :rows="2" /></el-descriptions-item>
                    <el-descriptions-item label="照片" :span="3">
                      <div class="jdt">
                        <file-upload :upload-api-url="uploadApiUrl" :url="ndHerbsList[index - 1].photoId"
                          @upload-success="handleUploadSuccess($event, ndHerbsList[index - 1])"
                          @delete-image="handleDeleteImage($event, ndHerbsList[index - 1])" />
                      </div>
                    </el-descriptions-item>
                  </el-descriptions>
                </div>

                <div class="bottom" style="width: 100%">
                  <div class="table-body">
                    <table class="table3">
                      <thead>
                        <tr>
                          <th style="width: 70px">序号</th>
                          <th style="width: 150px">物种名</th>
                          <th style="width: 150px">中文名</th>
                          <th style="width: 150px">拉丁名</th>
                          <th>生殖枝高均值cm</th>
                          <th>营养枝高均值cm</th>
                          <th>分盖度%</th>
                          <th>株丛数</th>
                          <th>生物量鲜重g/㎡</th>
                          <th>生物量干重g/㎡</th>

                          <th style="width: 90px">操作</th>
                        </tr>
                      </thead>

                      <tbody>
                        <tr v-for="(item, itemIndex) in ndHerbsList[index - 1].list" :key="itemIndex">
                          <td>{{ itemIndex + 1 }}</td>
                          <td>
                            <el-input v-model="item.speciesField" placeholder="物种名" />
                          </td>
                          <td>
                            <el-autocomplete v-model="item.chineseName" :fetch-suggestions="querySearchAsync"
                              placeholder="中文名" value-key="label" @select="handleSelect($event, item)" />
                          </td>

                          <td>
                            <el-input v-model="item.latinNameField" placeholder="拉丁名" />
                          </td>
                          <td>
                            <el-input v-model="item.reproductiveBranchHeightCm" placeholder="生殖枝高cm" />
                          </td>
                          <td>
                            <el-input v-model="item.vegetativeBranchHeightCm" placeholder="营养枝高cm" />
                          </td>
                          <td>
                            <el-input v-model="item.partialCoveragePct" placeholder="分盖度%" />
                          </td>
                          <td>
                            <el-input v-model="item.clusterCount" placeholder="株丛数" />
                          </td>
                          <td>
                            <el-input v-model="item.biomassFreshGM2" placeholder="生物量鲜重g/㎡" />
                          </td>
                          <td>
                            <el-input v-model="item.biomassDryGM2" placeholder="生物量干重g/㎡" />
                          </td>

                          <td>
                            <el-button type="danger" class="delete" @click="
                              deleteItem1(itemIndex, ndHerbsList[index - 1].list)
                              ">删除</el-button>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <div class="table-footer">
                    <table class="table4">
                      <tbody>
                        <tr>
                          <td colspan="1">
                            <el-button type="primary" @click="
                              addPlantcb(
                                ndHerbsList[index - 1].list
                              )
                              ">添加植物</el-button>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </template>
        </el-tabs>
      </el-tab-pane>

      <el-tab-pane label="灌木样方" name="third" style="min-height: 35px;">
        <el-button type="primary" size="small" class="addyf" @click="handshrubs">新增样方</el-button>
        <el-tabs v-model="shrubsval" :tab-position="tabPosition" @tab-remove="removeTab" closable>
          <template v-for="index in ndShrubsList.length">
            <el-tab-pane :label="'样方-' + index" :name="'gm_' + index">
              <div class="view1" :style="{ maxHeight: height + 'px', overflowY: 'auto' }">
                <div class="top1">
                  <el-descriptions :column="3" border>
                    <el-descriptions-item label="样地编号"><el-input v-model="syncPlotId" placeholder="样地编号"
                        readonly /></el-descriptions-item>
                    <el-descriptions-item label="灌木样方号"><el-input v-model="ndShrubsList[index - 1].shrubQuadratId"
                        placeholder="灌木样方号" /></el-descriptions-item>
                    <el-descriptions-item label="调查年">
                      <el-date-picker v-model="surveyDate" placeholder="请选择日期" style="width: 100%" type="year"
                        format="yyyy" value-format="yyyy" :clearable="false" />
                    </el-descriptions-item>
                    <el-descriptions-item label="样方记录人"><el-input v-model="ndShrubsList[index - 1].quadratRecorder"
                        placeholder="样方记录人" /></el-descriptions-item>
                    <el-descriptions-item label="课题负责人"><el-input v-model="ndShrubsList[index - 1].projectLeader"
                        placeholder="课题负责人" /></el-descriptions-item>
                    <el-descriptions-item label="生态系统类型"><el-input v-model="ndShrubsList[index - 1].ecosystemType"
                        placeholder="生态系统类型" /></el-descriptions-item>
                    <el-descriptions-item label="样方面积"><el-input v-model="ndShrubsList[index - 1].quadratArea"
                        placeholder="样方面积" /></el-descriptions-item>
                    <el-descriptions-item label="灌木总盖度%"><el-input v-model="ndShrubsList[index - 1].totalCoveragePct"
                        placeholder="灌木总盖度%" /></el-descriptions-item>
                    <el-descriptions-item label="灌木层高度cm"><el-input v-model="ndShrubsList[index - 1].layerHeightCm"
                        placeholder="灌木层高度cm" /></el-descriptions-item>
                    <el-descriptions-item label="照片" :span="3">
                      <div class="jdt">
                        <file-upload :upload-api-url="uploadApiUrl" :url="ndShrubsList[index - 1].photoId"
                          @upload-success="handleUploadSuccess($event, ndShrubsList[index - 1])"
                          @delete-image="handleDeleteImage($event, ndShrubsList[index - 1])" />
                      </div>
                    </el-descriptions-item>
                  </el-descriptions>
                </div>

                <div class="bottom" style="width: 100%">
                  <div class="table-body">
                    <table class="table3">
                      <thead>
                        <tr>
                          <th style="width: 70px">序号</th>
                          <th style="width: 150px">物种名</th>
                          <th style="width: 150px">中文名名</th>
                          <th style="width: 150px">拉丁名</th>
                          <th>植株编号</th>
                          <th>平均高度</th>
                          <th>茎杆数</th>
                          <th>茎杆平均基径</th>
                          <th>冠幅长轴</th>
                          <th>冠幅短轴</th>
                          <th>株丛数</th>
                          <th>生物量</th>
                          <th style="width: 200px">生物量取样测定方法描述</th>
                          <th style="width: 90px">操作</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr v-for="(item, itemIndex) in ndShrubsList[index - 1].list" :key="itemIndex">
                          <td>{{ itemIndex + 1 }}</td>
                          <td>
                            <el-input v-model="item.speciesField" placeholder="物种名" />
                          </td>
                          <td>
                            <el-autocomplete v-model="item.chineseName" :fetch-suggestions="querySearchAsync"
                              placeholder="中文名" value-key="label" @select="handleSelect($event, item)" />
                          </td>
                          <td>
                            <el-input v-model="item.latinName" placeholder="拉丁名" />
                          </td>
                          <td>
                            <el-input v-model="item.plantId" placeholder="植株编号" />
                          </td>
                          <td>
                            <el-input v-model="item.averageHeightCm" placeholder="平均高度" />
                          </td>
                          <td>
                            <el-input v-model="item.stemCount" placeholder="茎杆数" />
                          </td>
                          <td>
                            <el-input v-model="item.averageStemBaseDiameterCm" placeholder="茎杆平均基径" />
                          </td>
                          <td>
                            <el-input v-model="item.crownLongAxisCm" placeholder="冠幅长轴" />
                          </td>
                          <td>
                            <el-input v-model="item.crownShortAxisCm" placeholder="冠幅短轴" />
                          </td>
                          <td>
                            <el-input v-model="item.clusterCount" placeholder="株丛数" />
                          </td>
                          <td>
                            <el-input v-model="item.biomassGM2" placeholder="生物量" />
                          </td>
                          <td>
                            <el-input v-model="item.biomassMethod" placeholder="生物量取样测定方法描述" />
                          </td>
                          <td>
                            <el-button type="danger" class="delete" @click="
                              deleteItem1(itemIndex, ndShrubsList[index - 1].list)
                              ">删除</el-button>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <div class="table-footer">
                    <table class="table4">
                      <tbody>
                        <tr>
                          <td colspan="1">
                            <el-button type="primary" @click="
                              addPlantgm(
                                ndShrubsList[index - 1].list
                              )
                              ">
                              添加植物
                            </el-button>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </template>
        </el-tabs>
      </el-tab-pane>

      <el-tab-pane label="乔木样方" name="fourth" style="min-height: 35px;">
        <el-button type="primary" size="small" class="addyf" @click="handtrees">新增样方</el-button>
        <el-tabs v-model="treesval" :tab-position="tabPosition" @tab-remove="removeTab" closable>
          <template v-for="index in ndTreesList.length">
            <el-tab-pane :label="'样方-' + index" :name="'qm_' + index">
              <div class="view1" :style="{ maxHeight: height + 'px', overflowY: 'auto' }">
                <div class="top1">
                  <el-descriptions :column="3" border>
                    <el-descriptions-item label="样地编号"><el-input v-model="syncPlotId" placeholder="样地编号"
                        readonly /></el-descriptions-item>
                    <el-descriptions-item label="乔木样方号"><el-input v-model="ndTreesList[index - 1].treeQuadratId"
                        placeholder="乔木样方号" /></el-descriptions-item>
                    <el-descriptions-item label="调查年"><el-date-picker v-model="surveyDate" placeholder="请选择日期"
                        style="width: 100%" type="year" format="yyyy" value-format="yyyy"
                        :clearable="false" /></el-descriptions-item>
                    <el-descriptions-item label="样方记录人"><el-input v-model="ndTreesList[index - 1].quadratRecorder"
                        placeholder="样方记录人" /></el-descriptions-item>
                    <el-descriptions-item label="课题负责人"><el-input v-model="ndTreesList[index - 1].projectLeader"
                        placeholder="课题负责人" /></el-descriptions-item>
                    <el-descriptions-item label="生态系统类型"><el-input v-model="ndTreesList[index - 1].ecosystemType"
                        placeholder="生态系统类型" /></el-descriptions-item>
                    <el-descriptions-item label="样方面积"><el-input v-model="ndTreesList[index - 1].quadratArea"
                        placeholder="样方面积" /></el-descriptions-item>
                    <el-descriptions-item label="乔木总盖度%"><el-input v-model="ndTreesList[index - 1].totalCoveragePct"
                        placeholder="乔木总盖度%%" /></el-descriptions-item>
                    <el-descriptions-item label="乔木层高度cm"><el-input v-model="ndTreesList[index - 1].layerHeightCm"
                        placeholder="乔木层高度cm" /></el-descriptions-item>
                    <el-descriptions-item label="每木检尺测起测标准" :span="3"><el-input
                        v-model="ndTreesList[index - 1].measurementStandard"
                        placeholder="每木检尺测起测标准" /></el-descriptions-item>
                    <el-descriptions-item label="照片" :span="3">
                      <div class="jdt">
                        <file-upload :upload-api-url="uploadApiUrl" :url="ndTreesList[index - 1].photoId"
                          @upload-success="handleUploadSuccess($event, ndTreesList[index - 1])"
                          @delete-image="handleDeleteImage($event, ndTreesList[index - 1])" />
                      </div>
                    </el-descriptions-item>
                  </el-descriptions>
                </div>

                <div class="bottom" style="width: 100%">
                  <div class="table-body">
                    <table class="table3" :data="formData[0].arborYfList">
                      <thead>
                        <tr>
                          <th style="width: 70px">序号</th>
                          <th style="width: 150px">物种名</th>
                          <th style="width: 150px">中文名</th>
                          <th style="width: 150px">拉丁名</th>
                          <th>植株编号</th>
                          <th>高度</th>
                          <th>枝下高(m)</th>
                          <th style="width: 150px">胸径(cm)(1.3m 处)</th>
                          <th style="width: 150px">胸周长 cm (1.3m 处)</th>
                          <th style="width: 150px">冠幅短轴(cm)</th>
                          <th style="width: 150px">冠幅短轴(cm)</th>
                          <th>生物量(g/m2)</th>
                          <th style="width: 200px">生物量取样测定方法描述</th>
                          <th style="width: 90px">操作</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr v-for="(item, itemIndex) in ndTreesList[index - 1].list" :key="itemIndex">
                          <td>{{ itemIndex + 1 }}</td>
                          <td>
                            <el-input v-model="item.speciesField" placeholder="物种名" />
                          </td>
                          <td>
                            <el-autocomplete v-model="item.chineseName" :fetch-suggestions="querySearchAsync"
                              placeholder="中文名" value-key="label" @select="handleSelect($event, item)" />
                          </td>

                          <td>
                            <el-input v-model="item.latinName" placeholder="拉丁名" />
                          </td>
                          <td>
                            <el-input v-model="item.plantId" placeholder="植株编号" />
                          </td>
                          <td>
                            <el-input v-model="item.heightM" placeholder="高度" />
                          </td>
                          <td>
                            <el-input v-model="item.branchHeightM" placeholder="枝下高" />
                          </td>
                          <td>
                            <el-input v-model="item.dbhCm" placeholder="胸径" />
                          </td>
                          <td>
                            <el-input v-model="item.circumferenceCm" placeholder="胸周长" />
                          </td>
                          <td>
                            <el-input v-model="item.crownLongAxisCm" placeholder="冠幅长轴" />
                          </td>
                          <td>
                            <el-input v-model="item.crownShortAxisCm" placeholder="冠幅短轴" />
                          </td>
                          <td>
                            <el-input v-model="item.biomassGM2" placeholder="生物量" />
                          </td>
                          <td>
                            <el-input v-model="item.biomassMethod" placeholder="生物量取样测定方法描述" />
                          </td>

                          <td>
                            <el-button type="danger" class="delete" @click="
                              deleteItem1(itemIndex, ndTreesList[index - 1].list)
                              ">删除</el-button>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <div class="table-footer">
                    <table class="table4">
                      <tbody>
                        <tr>
                          <td colspan="1">
                            <el-button type="primary" @click="
                              addPlantqm(ndTreesList[index - 1].list)
                              ">添加植物</el-button>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </template>
        </el-tabs>
      </el-tab-pane>
    </el-tabs>

    <div class="btn">
      <!-- 返回按钮 -->
      <el-button style="margin-right: 8px" @click="goBack">返回</el-button>

      <!-- 提交按钮 -->
      <el-button type="danger" style="background-color: #1890ff; border-color: #1890ff" @click="submitData">{{
        this.button }}</el-button>

      <!-- 保存按钮 -->
    </div>
  </div>
</template>
<script>
import { MessageBox, Message } from "element-ui";
import FileUpload from "@/components/common/FileUpload/FileUpload.vue";
import config from "../../../config/config.js";
export default {
  name: "EditPage",
  components: {
    FileUpload,
  },
  data() {
    return {
      config,
      height: 300,
      hasId: !!this.$route.params.id,
      activeName: "first",
      tabPosition: "left",
      uploadApiUrl: "",
      imageList: [],
      num: 1,
      showButtons: false,
      backendData: {}, // 用于向后端提交的数据
      button: "新增数据",
      suffixes: ["01", "02", "03"],

      formData: [
        {
          // 乔木
          arborYfList: [
            [
              {
                // sampleplotid: null,
                // id: null,
                // area: null,
                // gd: null,
                // gfcz: null,
                // gfdz: null,
                // jlr: null,
                // ldm: null,
                // mmjc: null,
                // qmcgd: null,
                // qmyfid: null,
                // qmzgd: null,
                // sampleid: null,
                // swl: null,
                // swlqy: null,
                // wzm: null,
                // xj: null,
                // xzc: null,
                // zpbh: null,
                // zwm: null,
                // zxg: null,
                // zzbh: null,
                sampleid: null,
                qmyfid: null,
                area: null,
                wzdm: null,
                wzm: null,
                ldm: null,
                zgdavg: null,
                gaoduavg: null,
                meimujance: null,
                zhizhubh: null,
                xzgd: null,
                xiongjing: null,
                xzhouchang: null,
                gfcz: null,
                gfdz: null,
                swl: null,
                yubidu: null,
                limuzk: null,
                age: null,
                klwhd: null,
                ymjzs: null,
                qunluowaimao: null,
                shengjing: null,
                trlx: null,
                jlr: null,
                jgzpbh: null,
                yfzpbh: null,
                zywzzpbh: null,
                wzzpbh: null,
                riqi: new Date(),
                remark: null,
                sampleplotid: null,
              },
            ],
            [
              {
                sampleid: null,
                qmyfid: null,
                area: null,
                wzdm: null,
                wzm: null,
                ldm: null,
                zgdavg: null,
                gaoduavg: null,
                meimujance: null,
                zhizhubh: null,
                xzgd: null,
                xiongjing: null,
                xzhouchang: null,
                gfcz: null,
                gfdz: null,
                swl: null,
                yubidu: null,
                limuzk: null,
                age: null,
                klwhd: null,
                ymjzs: null,
                qunluowaimao: null,
                shengjing: null,
                trlx: null,
                jlr: null,
                jgzpbh: null,
                yfzpbh: null,
                zywzzpbh: null,
                wzzpbh: null,
                riqi: new Date(),
                remark: null,
                sampleplotid: null,
              },
            ],
            [
              {
                sampleid: null,
                qmyfid: null,
                area: null,
                wzdm: null,
                wzm: null,
                ldm: null,
                zgdavg: null,
                gaoduavg: null,
                meimujance: null,
                zhizhubh: null,
                xzgd: null,
                xiongjing: null,
                xzhouchang: null,
                gfcz: null,
                gfdz: null,
                swl: null,
                yubidu: null,
                limuzk: null,
                age: null,
                klwhd: null,
                ymjzs: null,
                qunluowaimao: null,
                shengjing: null,
                trlx: null,
                jlr: null,
                jgzpbh: null,
                yfzpbh: null,
                zywzzpbh: null,
                wzzpbh: null,
                riqi: new Date(),
                remark: null,
                sampleplotid: null,
              },
            ],
          ],
          // 草本
          herbYfList: [
            [
              {
                // sampleplotid: null,
                // area: null,
                // cbyfid: null,
                // ccgd: null,
                // ddj: null,
                // fgd: null,
                // id: null,
                // jlr: null,
                // klwgd: null,
                // ldm: null,
                // liku: null,
                // sampleid: null,
                // swlgz: null,
                // swlxz: null,
                // szzg: null,
                // wzm: null,
                // yyzg: null,
                // zcs: null,
                // zgd: null,
                // zm: null,
                // zpbh: null,
                // zwm: null,
                sampleid: null,
                cbyfid: null,
                wzdm: null,
                wzm: null,
                ldm: null,
                area: null,
                zcs: null,
                zgdavg: null,
                klwgd: null,
                klwhd: null,
                klwgz: null,
                klwxz: null,
                ccgd: null,
                szzgavg: null,
                yyzgavg: null,
                fgd: null,
                swlxz: null,
                swlgz: null,
                ddj: null,
                lk: null,
                lkxz: null,
                lkgz: null,
                cflength: null,
                cfwidth: null,
                ymjzhishu: null,
                shengjing: null,
                trlx: null,
                wzshu: null,
                gaoduavg: null,
                guanfu: null,
                midu: null,
                jlr: null,
                jgzpbh: null,
                yfzpbh: null,
                zywzzpbh: null,
                wzzpbh: null,
                riqi: new Date(),
                remark: null,
                sampleplotid: null,
                hanshuiliang: null,
              },
            ],
            [
              {
                sampleid: null,
                cbyfid: null,
                wzdm: null,
                wzm: null,
                ldm: null,
                area: null,
                zcs: null,
                zgdavg: null,
                klwgd: null,
                klwhd: null,
                klwgz: null,
                klwxz: null,
                ccgd: null,
                szzgavg: null,
                yyzgavg: null,
                fgd: null,
                swlxz: null,
                swlgz: null,
                ddj: null,
                lk: null,
                lkxz: null,
                lkgz: null,
                cflength: null,
                cfwidth: null,
                ymjzhishu: null,
                shengjing: null,
                trlx: null,
                wzshu: null,
                gaoduavg: null,
                guanfu: null,
                midu: null,
                jlr: null,
                jgzpbh: null,
                yfzpbh: null,
                zywzzpbh: null,
                wzzpbh: null,
                riqi: new Date(),
                remark: null,
                sampleplotid: null,
                hanshuiliang: null,
              },
            ],
            [
              {
                sampleid: null,
                cbyfid: null,
                wzdm: null,
                wzm: null,
                ldm: null,
                area: null,
                zcs: null,
                zgdavg: null,
                klwgd: null,
                klwhd: null,
                klwgz: null,
                klwxz: null,
                ccgd: null,
                szzgavg: null,
                yyzgavg: null,
                fgd: null,
                swlxz: null,
                swlgz: null,
                ddj: null,
                lk: null,
                lkxz: null,
                lkgz: null,
                cflength: null,
                cfwidth: null,
                ymjzhishu: null,
                shengjing: null,
                trlx: null,
                wzshu: null,
                gaoduavg: null,
                guanfu: null,
                midu: null,
                jlr: null,
                jgzpbh: null,
                yfzpbh: null,
                zywzzpbh: null,
                wzzpbh: null,
                riqi: new Date(),
                remark: null,
                sampleplotid: null,
                hanshuiliang: null,
              },
            ],
          ],
          // 样地
          sampleInfo: {
            // sampleplotid: null,
            // id: null,
            // // 监测点编号
            // sampleid: null,
            // // 调查人
            // diaocha: null,
            // // 调查日期
            // riqi: new Date(),
            // // 生态系统类型
            // type: null,
            // // 群系或群系组
            // qunxi: null,
            // // 群从名称
            // quncong: null,
            // // 调查地点
            // didian: null,
            // // 盟市
            // mengshi: null,
            // // 旗（县、区）
            // qixian: null,
            // // 经度
            // jingdu: null,
            // // 纬度
            // weidu: null,
            // // 海拔高度
            // haiba: null,
            // // 地形地貌
            // dxdm: null,
            // // 坡向
            // poxiang: null,
            // // 坡位
            // powei: null,
            // // 坡度
            // podu: null,
            // // 干扰类型
            // grlx: null,
            // // 人工种植
            // rgzz: null,
            // // 乔木层
            // qmc: null,
            // // 灌木层
            // gmc: null,
            // // 草本层
            // cbc: null,
            // // 苔藓地衣层
            // txdyc: null,
            // // 地表特征
            // dibiao: null,
            // // 土壤类型
            // trlx: null,
            // // 土壤质地
            // trzd: null,
            // // 土壤测定
            // trcd: null,
            // // 记录人
            // jilu: null,
            // // 其他记录
            // qita: null,
            // //  植被结构
            // zbjg: null,
            // // 照片编号
            // zpbh: null

            category: null,
            cbceng: null,
            diaocha: null,
            dlw: null,
            dlwdm: null,
            dxdm: null,
            fs: null,
            fsdm: null,
            fusha: null,
            fushadm: null,
            geom: null,
            gmceng: null,
            haiba: null,
            id: null,
            jiancequ: null,
            jilu: null,
            lat: null,
            lk: null,
            lkdm: null,
            located: null,
            lon: null,
            ls: null,
            lsdm: null,
            lycd: null,
            lycddm: null,
            lyfs: null,
            lyfsdm: null,
            miaoshu: null,
            pd: null,
            pw: null,
            pwdm: null,
            px: null,
            pxdm: null,
            qmceng: null,
            qunluo: null,
            qunxi: null,
            rengongzhongzhi: null,
            riqi: new Date(),
            sampleid: null,
            samplename: null,
            ss: null,
            ssdm: null,
            trceding: null,
            trlx: null,
            trlxdm: null,
            trzhidi: null,
            txdyceng: null,
            xzqhcode: null,
            xzqhname: null,
            yjd: null,
            yjddm: null,
            zbjiegou: null,
            zblx: null,
            zblxdm: null,
            zllx: null,
            zpbh: null,
          },
          // 灌木
          shrubYfList: [
            [
              {
                // sampleplotid: null,
                // id: null,
                // area: null,
                // cs: null,
                // gfcz: null,
                // gfdz: null,
                // gmcgd: null,
                // gmyfid: null,
                // gmzgd: null,
                // jgpjunjj: null,
                // jgs: null,
                // jlr: null,
                // ldm: null,
                // pjgd: null,
                // sampleid: null,
                // swl: null,
                // swlqy: null,
                // wzm: null,
                // zpbh: null,
                // zwm: null,
                // zzbh: null,
                sampleid: null,
                gmyfid: null,
                area: null,
                wzdm: null,
                wzm: null,
                ldm: null,
                zgdavg: null,
                gaoduavg: null,
                zhizhubh: null,
                jingganshu: null,
                jijingavg: null,
                gfcz: null,
                gfdz: null,
                gfavg: null,
                gfbiaozhunzhu: null,
                swl: null,
                swlquyang: null,
                zcs: null,
                congfuc: null,
                congfuk: null,
                congfuavg: null,
                midu: null,
                klwhd: null,
                klwgz: null,
                ymjzhishu: null,
                swlxz: null,
                swlgz: null,
                jlr: null,
                jgzpbh: null,
                yfzpbh: null,
                zywzzpbh: null,
                wzzpbh: null,
                riqi: new Date(),
                remark: null,
                sampleplotid: null,
              },
            ],
            [
              {
                sampleid: null,
                gmyfid: null,
                area: null,
                wzdm: null,
                wzm: null,
                ldm: null,
                zgdavg: null,
                gaoduavg: null,
                zhizhubh: null,
                jingganshu: null,
                jijingavg: null,
                gfcz: null,
                gfdz: null,
                gfavg: null,
                gfbiaozhunzhu: null,
                swl: null,
                swlquyang: null,
                zcs: null,
                congfuc: null,
                congfuk: null,
                congfuavg: null,
                midu: null,
                klwhd: null,
                klwgz: null,
                ymjzhishu: null,
                swlxz: null,
                swlgz: null,
                jlr: null,
                jgzpbh: null,
                yfzpbh: null,
                zywzzpbh: null,
                wzzpbh: null,
                riqi: new Date(),
                remark: null,
                sampleplotid: null,
              },
            ],
            [
              {
                // sampleplotid: null,
                // id: null,
                // area: null,
                // cs: null,
                // gfcz: null,
                // gfdz: null,
                // gmcgd: null,
                // gmyfid: null,
                // gmzgd: null,
                // jgpjunjj: null,
                // jgs: null,
                // jlr: null,
                // ldm: null,
                // pjgd: null,
                // sampleid: null,
                // swl: null,
                // swlqy: null,
                // wzm: null,
                // zpbh: null,
                // zwm: null,
                // zzbh: null,
                sampleid: null,
                gmyfid: null,
                area: null,
                wzdm: null,
                wzm: null,
                ldm: null,
                zgdavg: null,
                gaoduavg: null,
                zhizhubh: null,
                jingganshu: null,
                jijingavg: null,
                gfcz: null,
                gfdz: null,
                gfavg: null,
                gfbiaozhunzhu: null,
                swl: null,
                swlquyang: null,
                zcs: null,
                congfuc: null,
                congfuk: null,
                congfuavg: null,
                midu: null,
                klwhd: null,
                klwgz: null,
                ymjzhishu: null,
                swlxz: null,
                swlgz: null,
                jlr: null,
                jgzpbh: null,
                yfzpbh: null,
                zywzzpbh: null,
                wzzpbh: null,
                riqi: new Date(),
                remark: null,
                sampleplotid: null,
              },
            ],
          ],
          // 土壤
          soilCd: [
            {
              // sampleplotid: null,
              // atdan: null,
              // jlr: null,
              // ph: null,
              // qdan: null,
              // qitaturang: null,
              // qtan: null,
              // sampleid: null,
              // trcsd: null,
              // trrl: null,
              // trsf: null,
              // xtdan: null,
              // yjtan: null,
              // area: null,
              // trlx: null,
              // dixing: null,
              // fushizhi: null,
              // trqingshidm: null,
              // trqingshimc: null,
              // huandaoid: null,
              // baohehdtxz: null,
              // tuoshuihdtxz: null,
              // hongganhdtxz: null,
              // huandaoz: null,
              // trjxzucheng: null,
              // qlin: null,
              // qjia: null,
              // sxlin: null,
              // yxjia: null,
              // riqi: null,
              // remark: null,
              // sampleplotid: null,
              // trcdid: null,
              // zpbh: null,

              sampleid: null,
              jlr: null,
              trcsd: null,
              trrl: null,
              trsf: null,
              ph: null,
              yjtan: null,
              qtan: null,
              qdan: null,
              atdan: null,
              xtdan: null,
              qitaturang: null,
              area: null,
              trlx: null,
              dixing: null,
              fushizhi: null,
              trqingshidm: null,
              trqingshimc: null,
              huandaoid: null,
              baohehdtxz: null,
              tuoshuihdtxz: null,
              hongganhdtxz: null,
              huandaoz: null,
              trjxzucheng: null,
              qlin: null,
              qjia: null,
              sxlin: null,
              yxjia: null,
              zpbh: null,
              riqi: new Date(),
              remark: null,
              sampleplotid: null,
              trcdid: null,
            },
          ],
        },
      ],
      dxDmOptions: config.ydArray.find((item) => item.name === "地形地貌")
        .options,
      pxOptions: config.ydArray.find((item) => item.name === "坡向").options,
      pwOptions: config.ydArray.find((item) => item.name === "坡位").options,
      trlxOptions: config.ydArray.find((item) => item.name === "土壤类型")
        .options,
      zblxOptions: config.ydArray.find((item) => item.name === "植被类型")
        .options,
      dlwOptions: config.ydArray.find((item) => item.name === "凋落物").options,
      fsOptions: config.ydArray.find((item) => item.name === "风蚀").options,
      lsOptions: config.ydArray.find((item) => item.name === "砾石").options,
      lkOptions: config.ydArray.find((item) => item.name === '立枯').options,
      fushaOptions: config.ydArray.find((item) => item.name === '覆沙').options,
      ssOptions: config.ydArray.find((item) => item.name === '水蚀').options,
      yjbOptions: config.ydArray.find((item) => item.name === '盐碱斑').options,
      lyfsOptions: config.ydArray.find((item) => item.name === '利用方式').options,
      lycdOptions: config.ydArray.find((item) => item.name === '利用程度').options,
      xzqhOptions: config.xzqhArray, // 引入行政区划的选项
      // selectedXzqh: [], // 用于绑定到Cascader组件的值
      selectedXZQH: '', // 存储选择的完整路径
      ndPlots: {
        id: null,
        plotId: null,
        originalPlotId: null,
        ecosystemTypeVegetation: null,
        vegetationGroup: null,
        communityName: null,
        location: null,
        longitude: null,
        latitude: null,
        elevation: null,
        topography: null,
        slopeDirection: null,
        slopePosition: null,
        slopeDegree: null,
        disturbanceLevel: null,
        disturbanceType: null,
        artificialPlanting: null,
        treeLayer: null,
        shrubLayer: null,
        herbLayer: null,
        mossLichenLayer: null,
        surfaceFeatures: null,
        soilType: null,
        soilTexture: null,
        soilMeasurement: null,
        investigator: null,
        recorder: null,
        surveyDate: null,
        otherNotes: null,
        ecosystemCategory: null,
        projectLeader: null,
      },
      ndHerbsList: [{
        id: null,
        plotId: null,
        originalPlotId: this.a,
        herbQuadratId: null,
        quadratRecorder: null,
        quadratAreaM2: null,
        totalCoveragePct: null,
        layerHeightCm: null,
        list: [{
          speciesField: null,
          chineseName: null,
          latinNameField: null,
          reproductiveBranchHeightCm: null,
          vegetativeBranchHeightCm: null,
          partialCoveragePct: null,
          clusterCount: null,
          biomassFreshGM2: null,
          biomassDryGM2: null,
        }],
        abundanceLevel: null,
        notes: null,
        photoId: null,
        surveyYear: null,
        ecosystemType: null,
        subProjectLeader: null,
      }],
      ndShrubsList: [{
        id: null,
        plotId: null,
        newPlotId: null,
        originalPlotId: this.a,
        shrubQuadratId: null,
        quadratRecorder: null,
        quadratArea: null,
        totalCoveragePct: null,
        layerHeightCm: null,
        list: [{
          speciesField: null,
          chineseName: null,
          latinName: null,
          plantId: null,
          averageHeightCm: null,
          stemCount: null,
          averageStemBaseDiameterCm: null,
          crownLongAxisCm: null,
          crownShortAxisCm: null,
          biomassGM2: null,
          biomassMethod: null,
          clusterCount: null,
        }],
        photoId: null,
        surveyYear: null,
        ecosystemType: null,
        projectLeader: null,
      }],
      ndTreesList: [{
        id: null,
        plotId: null,
        newPlotId: null,
        originalPlotId: this.a,
        treeQuadratId: null,
        quadratRecorder: null,
        quadratArea: null,
        totalCoveragePct: null,
        layerHeightCm: null,
        measurementStandard: null,
        list: [{
          speciesField: null,
          chineseName: null,
          latinName: null,
          plantId: null,
          heightM: null,
          branchHeightM: null,
          dbhCm: null,
          circumferenceCm: null,
          crownLongAxisCm: null,
          crownShortAxisCm: null,
          biomassGM2: null,
          biomassMethod: null,
        }],
        photoId: null,
        surveyYear: null,
        ecosystemType: null,
        projectLeader: null,
      }],
      herbsval: 'cb_1',
      shrubsval: 'gm_1',
      treesval: 'qm_1',
      aa: { zpbh: '' },
    };
  },

  created() {
    const height = window.innerHeight - 185;
    this.height = height;
    // this.formatDates(this.formData);

  },
  beforeRouteEnter(to, from, next) {
    // to.params 包含当前路由的参数
    if (to.params.id) {
      // 如果有ID参数，调用getData方法
      console.log("拿到的id", to.params.id);
      next(async (vm) => {
        try {
          await vm.getDataById();
          vm.button = "修改数据"; // 设置按钮为“修改数据”
          // this.fetchData();
        } catch (error) {
          console.error("Error:", error);
        }
      });
    } else {
      // 如果没有ID参数，直接进入页面
      next((vm) => {
        // 如果没有 ID，调用初始化本地数据的方法
        // vm.initLocalData();
        vm.button = "新增数据"; // 设置按钮为“新增数据”
      });
    }
  },
  mounted() {
    // // 显示图片
    // if (this.$route.params.id) {
    //   this.fetchData();
    // }
    // 渲染时根据现有数据设置初始状态
    // this.renderForm();
    // this.setInitialXZQH();
    this.uploadApiUrl = process.env.VUE_APP_BASE_API + 'rest/uploadpic';
  },

  methods: {
    refreshPage() {
      window.location.reload();
    },

    async fetchData() {
      console.log(88888888);
      try {
        // 获取样本信息
        if (this.$route.params.id) {
          const imageResponse = await this.$api.fetchImagesBySampleId(
            this.$route.params.id
          );
          // this.imageList = imageResponse.data; // 假设返回的数据是一个包含图片信息的数组
          console.log("imageResponse", imageResponse.data.data);
          this.imageList = imageResponse.data.data;
        }
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    },
    initLocalData() {
      // 初始化本地数据，这里以 herbYfList 为例

      console.log("88888888888888", this.formData[0]);
    },

    generateHerbSampleId(herbItem, suffix, field) {
      // console.log("herbItem", herbItem);
      if (herbItem.sampleid !== null) {
        // 在这里判断有没有-，有-就把后两位通过-拼接上，没有就按照下面的来

        const generatedId = `${herbItem.sampleid}-${suffix}`;

        herbItem[field] = generatedId;
        // console.log("generatedId", generatedId);
        return generatedId;
      }

      // 检查sampleid是否为null
      //   if (herbItem.sampleid !== null) {
      //     // 判断传递进来的 field 中是否包含 "-"
      //     const containsHyphenInField = herbItem[field] ? herbItem[field].includes("-") : false;

      //     // 如果 field 存在且包含"-"
      //     if (containsHyphenInField) {
      //     // 生成新的标识
      //     const generatedId = `${herbItem.sampleid}-${suffix}`;

      // // 将生成的标识存储到指定字段中
      // herbItem[field] = generatedId;

      // // 返回生成的标识
      // console.log("generatedId", generatedId);
      // return generatedId;

      //     } else {
      //       // 如果 field 不存在或者不包含"-"
      //       if (herbItem[field]) {
      //         console.log('我要疯了', herbItem[field]);
      //       }

      //      // 拼接后两位数字
      //      const generatedId = `${herbItem.sampleid}-${herbItem[field].split("-")[1]}`;

      // // 将生成的标识存储到指定字段中
      // herbItem[field] = generatedId;

      // // 返回生成的标识
      // console.log("走到了这里", generatedId);
      // return generatedId;
      //     }
      //   }
    },
    prepareBackendData() {
      this.backendData = {
        arborYfList: this.formData.flatMap((item) => item.arborYfList.flat()),

        herbYfList: this.formData.flatMap((item) => item.herbYfList.flat()),

        sampleInfo: this.formData.map((item) => item.sampleInfo)[0],

        shrubYfList: this.formData.flatMap((item) => item.shrubYfList.flat()),
        soilCd: this.formData.flatMap((item) => item.soilCd),
      };

      console.log("提交后端的数据", this.backendData);
    },
    getDataById() {
      // console.log("调用了");
      this.ndHerbsList = [];
      this.ndShrubsList = [];
      this.ndTreesList = [];
      const id = this.$route.params.id;
      // console.log("sampleid7777", id);

      this.$api
        .getPlotsInfoByid(id)
        .then((response) => {
          if (response.data.code === 0) {
            // 处理成功的情况
            // console.log("成功:", response);
            console.log("分组前的数据", response.data.data);
            // console.log("99999999999", response.data.data);
            // 解构响应数据
            const { ndPlots, ndHerbsList, ndShrubsList, ndTreesList } = response.data.data;
            this.ndPlots = ndPlots;
            // 草本
            this.ndHerbsList = ndHerbsList ? this.herbsDataReset(ndHerbsList) : [];

            // 灌木
            this.ndShrubsList = ndShrubsList ? this.shrubsDataReset(ndShrubsList) : [];

            // 乔木
            this.ndTreesList = ndTreesList ? this.treesDataReset(ndTreesList) : [];
          }
        })
        .catch((error) => {
          // 处理失败的情况
          console.error("失败:", error);
        });
    },
    // 草本数据格式划
    herbsDataReset(data) {
      const transformedData = data.reduce((acc, current) => {
        const { herbQuadratId } = current;

        // 如果当前herbQuadratId不在acc中，则初始化一个空数组
        if (!acc[herbQuadratId]) {
          acc[herbQuadratId] = {
            originalPlotId: current.originalPlotId,
            herbQuadratId: herbQuadratId,
            quadratRecorder: current.quadratRecorder,
            quadratAreaM2: current.quadratAreaM2,
            totalCoveragePct: current.totalCoveragePct,
            layerHeightCm: current.layerHeightCm,
            abundanceLevel: current.abundanceLevel,
            notes: current.notes,
            surveyYear: current.surveyYear.toString(),
            ecosystemType: current.ecosystemType,
            projectLeader: current.projectLeader,
            photoId: current.photoId,
            list: []
          };
        }

        // 将当前对象添加到对应的list中
        acc[herbQuadratId].list.push({
          speciesField: current.speciesField,
          chineseName: current.chineseName,
          latinNameField: current.latinNameField,
          reproductiveBranchHeightCm: current.reproductiveBranchHeightCm,
          vegetativeBranchHeightCm: current.vegetativeBranchHeightCm,
          partialCoveragePct: current.partialCoveragePct,
          clusterCount: current.clusterCount,
          biomassFreshGM2: current.biomassFreshGM2,
          biomassDryGM2: current.biomassDryGM2,
        });

        return acc;
      }, {});

      // 将reduce结果转换为数组形式
      const result = Object.values(transformedData);
      return result;
    },
    // 灌木数据格式划
    shrubsDataReset(data) {
      const transformedData = data.reduce((acc, current) => {
        const { shrubQuadratId } = current;

        // 如果当前shrubQuadratId不在acc中，则初始化一个空数组
        if (!acc[shrubQuadratId]) {
          acc[shrubQuadratId] = {
            originalPlotId: current.originalPlotId,
            shrubQuadratId: shrubQuadratId,
            quadratRecorder: current.quadratRecorder,
            quadratArea: current.quadratArea,
            totalCoveragePct: current.totalCoveragePct,
            layerHeightCm: current.layerHeightCm,
            surveyYear: current.surveyYear.toString(),
            ecosystemType: current.ecosystemType,
            projectLeader: current.projectLeader,
            photoId: current.photoId,
            list: []
          };
        }

        // 将当前对象添加到对应的list中
        acc[shrubQuadratId].list.push({
          speciesField: current.speciesField,
          chineseName: current.chineseName,
          latinName: current.latinName,
          plantId: current.plantId,
          averageHeightCm: current.averageHeightCm,
          stemCount: current.stemCount,
          averageStemBaseDiameterCm: current.averageStemBaseDiameterCm,
          crownLongAxisCm: current.crownLongAxisCm,
          crownShortAxisCm: current.crownShortAxisCm,
          biomassGM2: current.biomassGM2,
          biomassMethod: current.biomassMethod,
          clusterCount: current.clusterCount,
        });

        return acc;
      }, {});

      // 将reduce结果转换为数组形式
      const result = Object.values(transformedData);
      return result;
    },
    // 乔木数据格式划
    treesDataReset(data) {
      const transformedData = data.reduce((acc, current) => {
        const { treeQuadratId } = current;

        // 如果当前treeQuadratId不在acc中，则初始化一个空数组
        if (!acc[treeQuadratId]) {
          acc[treeQuadratId] = {
            originalPlotId: current.originalPlotId,
            treeQuadratId: treeQuadratId,
            quadratRecorder: current.quadratRecorder,
            quadratArea: current.quadratArea,
            totalCoveragePct: current.totalCoveragePct,
            layerHeightCm: current.layerHeightCm,
            measurementStandard: current.measurementStandard,
            surveyYear: current.surveyYear.toString(),
            ecosystemType: current.ecosystemType,
            projectLeader: current.projectLeader,
            photoId: current.photoId,
            list: []
          };
        }

        // 将当前对象添加到对应的list中
        acc[treeQuadratId].list.push({
          speciesField: current.speciesField,
          chineseName: current.chineseName,
          latinName: current.latinName,
          plantId: current.plantId,
          heightM: current.heightM,
          branchHeightM: current.branchHeightM,
          dbhCm: current.dbhCm,
          circumferenceCm: current.circumferenceCm,
          crownLongAxisCm: current.crownLongAxisCm,
          crownShortAxisCm: current.crownShortAxisCm,
          biomassGM2: current.biomassGM2,
          biomassMethod: current.biomassMethod,
        });

        return acc;
      }, {});

      // 将reduce结果转换为数组形式
      const result = Object.values(transformedData);
      return result;
    },
    handleClick() {
      console.log(this.formData[0].herbYfList);
      // this.show
    },
    handleSampleIdInput(sampleId) {
      // console.log("sampleId", sampleId);
      // 在样地表中输入了 sampleid 后，将其设置到草本表中的每一项
      this.updateID(sampleId);
    },
    updateID(sampleId) {
      // 在样地表中输入了 sampleid 后，将其设置到草本表中的每一项
      this.formData.forEach((item) => {
        // 设置草本表中的 sampleid
        // item.herbYfList.forEach((herbItem) => {
        //   herbItem.sampleid = sampleId;
        // });

        item.herbYfList.forEach((herbItem) => {
          herbItem.forEach((subItem) => {
            subItem.sampleid = sampleId;
          });
        });
        // console.log(" item.herbYfList", item.herbYfList[0][0].sampleid);
        // 设置灌木表中的 sampleid
        item.shrubYfList.forEach((shrubYItem) => {
          // shrubYItem.sampleid = sampleId;
          shrubYItem.forEach((subItem) => {
            subItem.sampleid = sampleId;
          });
        });
        // 设置乔木表中的 sampleid
        item.arborYfList.forEach((arborYItem) => {
          // arborYItem.sampleid = sampleId;
          arborYItem.forEach((subItem) => {
            subItem.sampleid = sampleId;
          });
        });
        // 设置土壤表中的 sampleid
        // item.soilCd.forEach((soilCdItem) => {
        //   soilCdItem.sampleid = sampleId;
        // });
        item.soilCd[0].sampleid = sampleId;
        // console.log("item.soilCd", item.soilCd);
      });
    },

    // 处理返回按钮的点击事件
    goBack() {
      // 在这里执行返回操作的逻辑
      this.$router.go(-1);
    },

    deleteItem1(index, group) {
      // 在这里编写删除操作的逻辑
      if (group.length === 1) {
        return;
      }
      MessageBox.confirm("确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 用户点击了确定按钮
          console.log("用户点击了确定按钮");
          group.splice(index, 1);
        })
        .catch(() => {
          // 用户点击了取消按钮
          console.log("用户点击了取消按钮");
        });
    },

    addPlantcb(list) {
      list.push({
        speciesField: '',
        chineseName: '',
        latinNameField: '',
        reproductiveBranchHeightCm: '',
        vegetativeBranchHeightCm: '',
        partialCoveragePct: '',
        clusterCount: '',
        biomassFreshGM2: '',
        biomassDryGM2: '',
      })
    },
    addPlantgm(list) {
      list.push({
        speciesField: '',
        chineseName: '',
        latinName: '',
        plantId: '',
        averageHeightCm: '',
        stemCount: '',
        averageStemBaseDiameterCm: '',
        crownLongAxisCm: '',
        crownShortAxisCm: '',
        biomassGM2: '',
        biomassMethod: '',
        clusterCount: '',
      })
    },
    addPlantqm(list) {
      list.push({
        speciesField: '',
        chineseName: '',
        latinName: '',
        plantId: '',
        heightM: '',
        branchHeightM: '',
        dbhCm: '',
        circumferenceCm: '',
        crownLongAxisCm: '',
        crownShortAxisCm: '',
        biomassGM2: '',
        biomassMethod: '',
      })
    },

    // 处理保存按钮的点击事件
    saveData() {

      // 弹出确认框
      this.$confirm(`是否保存数据？`, "提示", {
        confirmButtonText: "保存",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 用户点击保存的处理逻辑
          // 可以继续执行保存操作
          console.log("用户点击了保存");
          // 继续执行保存操作
          this.createData();
        })
        .catch(() => {
          // 用户点击取消的处理逻辑
          console.log("用户点击了取消");
        });
    },

    // 将分组后的数据转换为未分组的格式
    flattenData() {
      // console.log("调用了333333333", this.formData[0].herbYfList);
      const flattenedHerbYfList = [];
      for (const groupKey in this.formData[0].herbYfList) {
        if (Object.hasOwnProperty.call(this.formData[0].herbYfList, groupKey)) {
          flattenedHerbYfList.push(...this.formData[0].herbYfList[groupKey]);
        }
      }

      // 将转换后的数据设置回 formData
      this.formData[0].herbYfList = flattenedHerbYfList;
      // console.log('调用了444444',this.formData[0].herbYfList);

      const flattenedHerbYfList1 = [];
      for (const groupKey1 in this.formData[0].shrubYfList) {
        if (
          Object.hasOwnProperty.call(this.formData[0].shrubYfList, groupKey1)
        ) {
          flattenedHerbYfList1.push(...this.formData[0].shrubYfList[groupKey1]);
        }
      }

      // 将转换后的数据设置回 formData
      this.formData[0].shrubYfList = flattenedHerbYfList1;

      const flattenedHerbYfList2 = [];
      for (const groupKey2 in this.formData[0].arborYfList) {
        if (
          Object.hasOwnProperty.call(this.formData[0].arborYfList, groupKey2)
        ) {
          flattenedHerbYfList2.push(...this.formData[0].arborYfList[groupKey2]);
        }
      }

      // 将转换后的数据设置回 formData
      this.formData[0].arborYfList = flattenedHerbYfList2;
      //     this.formData[0].herbYfList = this.formData[0].herbYfList.flat();
      // this.formData[0].shrubYfList = this.formData[0].shrubYfList.flat();
      // this.formData[0].arborYfList = this.formData[0].arborYfList.flat();
    },
    updateSampleIds() {
      // 遍历样方1中的所有对象
      for (let i = 1; i < this.formData[0].herbYfList[0].length; i++) {
        // 将每个对象的sampleid和cbyfid等属性设置为样方1第一个对象相应的值
        this.formData[0].herbYfList[0][i].sampleid =
          this.formData[0].herbYfList[0][0].sampleid;
        this.formData[0].herbYfList[0][i].cbyfid =
          this.formData[0].herbYfList[0][0].cbyfid;
        this.formData[0].herbYfList[0][i].ccgd =
          this.formData[0].herbYfList[0][0].ccgd;
        this.formData[0].herbYfList[0][i].area =
          this.formData[0].herbYfList[0][0].area;
        this.formData[0].herbYfList[0][i].zgdavg =
          this.formData[0].herbYfList[0][0].zgdavg;
        this.formData[0].herbYfList[0][i].jlr =
          this.formData[0].herbYfList[0][0].jlr;
        this.formData[0].herbYfList[0][i].klwgd =
          this.formData[0].herbYfList[0][0].klwgd;
        this.formData[0].herbYfList[0][i].ddj =
          this.formData[0].herbYfList[0][0].ddj;
        this.formData[0].herbYfList[0][i].lk =
          this.formData[0].herbYfList[0][0].lk;
        this.formData[0].herbYfList[0][i].remark =
          this.formData[0].herbYfList[0][0].remark;
        this.formData[0].herbYfList[0][i].jgzpbh =
          this.formData[0].herbYfList[0][0].jgzpbh;
        this.formData[0].herbYfList[0][i].yfzpbh =
          this.formData[0].herbYfList[0][0].yfzpbh;
        this.formData[0].herbYfList[0][i].zywzzpbh =
          this.formData[0].herbYfList[0][0].zywzzpbh;
        this.formData[0].herbYfList[0][i].wzzpbh =
          this.formData[0].herbYfList[0][0].wzzpbh;
        this.formData[0].herbYfList[0][i].riqi =
          this.formData[0].herbYfList[0][0].riqi;
      }

      // 遍历样方2中的所有对象
      for (let i = 1; i < this.formData[0].herbYfList[1].length; i++) {
        // 将每个对象的sampleid和cbyfid等属性设置为样方2第一个对象相应的值
        this.formData[0].herbYfList[1][i].sampleid =
          this.formData[0].herbYfList[1][0].sampleid;
        this.formData[0].herbYfList[1][i].cbyfid =
          this.formData[0].herbYfList[1][0].cbyfid;
        this.formData[0].herbYfList[1][i].ccgd =
          this.formData[0].herbYfList[1][0].ccgd;
        this.formData[0].herbYfList[1][i].area =
          this.formData[0].herbYfList[1][0].area;
        this.formData[0].herbYfList[1][i].zgdavg =
          this.formData[0].herbYfList[1][0].zgdavg;
        this.formData[0].herbYfList[1][i].jlr =
          this.formData[0].herbYfList[1][0].jlr;
        this.formData[0].herbYfList[1][i].klwgd =
          this.formData[0].herbYfList[1][0].klwgd;
        this.formData[0].herbYfList[1][i].ddj =
          this.formData[0].herbYfList[1][0].ddj;
        this.formData[0].herbYfList[1][i].lk =
          this.formData[0].herbYfList[1][0].lk;
        this.formData[0].herbYfList[1][i].remark =
          this.formData[0].herbYfList[1][0].remark;
        this.formData[0].herbYfList[1][i].jgzpbh =
          this.formData[0].herbYfList[1][0].jgzpbh;
        this.formData[0].herbYfList[1][i].yfzpbh =
          this.formData[0].herbYfList[1][0].yfzpbh;
        this.formData[0].herbYfList[1][i].zywzzpbh =
          this.formData[0].herbYfList[1][0].zywzzpbh;
        this.formData[0].herbYfList[1][i].wzzpbh =
          this.formData[0].herbYfList[1][0].wzzpbh;
        this.formData[0].herbYfList[1][i].riqi =
          this.formData[0].herbYfList[1][0].riqi;
        // 可以继续添加其他属性的设置
      }

      // 遍历样方3中的所有对象
      for (let i = 1; i < this.formData[0].herbYfList[2].length; i++) {
        // 将每个对象的sampleid和cbyfid等属性设置为样方3第一个对象相应的值

        this.formData[0].herbYfList[2][i].sampleid =
          this.formData[0].herbYfList[2][0].sampleid;
        this.formData[0].herbYfList[2][i].cbyfid =
          this.formData[0].herbYfList[2][0].cbyfid;
        this.formData[0].herbYfList[2][i].ccgd =
          this.formData[0].herbYfList[2][0].ccgd;
        this.formData[0].herbYfList[2][i].area =
          this.formData[0].herbYfList[2][0].area;
        this.formData[0].herbYfList[2][i].zgdavg =
          this.formData[0].herbYfList[2][0].zgdavg;
        this.formData[0].herbYfList[2][i].jlr =
          this.formData[0].herbYfList[2][0].jlr;
        this.formData[0].herbYfList[2][i].klwgd =
          this.formData[0].herbYfList[2][0].klwgd;
        this.formData[0].herbYfList[2][i].ddj =
          this.formData[0].herbYfList[2][0].ddj;
        this.formData[0].herbYfList[2][i].lk =
          this.formData[0].herbYfList[2][0].lk;
        this.formData[0].herbYfList[2][i].remark =
          this.formData[0].herbYfList[2][0].remark;
        this.formData[0].herbYfList[2][i].jgzpbh =
          this.formData[0].herbYfList[2][0].jgzpbh;
        this.formData[0].herbYfList[2][i].yfzpbh =
          this.formData[0].herbYfList[2][0].yfzpbh;
        this.formData[0].herbYfList[2][i].zywzzpbh =
          this.formData[0].herbYfList[2][0].zywzzpbh;
        this.formData[0].herbYfList[2][i].wzzpbh =
          this.formData[0].herbYfList[2][0].wzzpbh;
        this.formData[0].herbYfList[2][i].riqi =
          this.formData[0].herbYfList[2][0].riqi;
        // 可以继续添加其他属性的设置
      }

      for (let i = 1; i < this.formData[0].shrubYfList[0].length; i++) {
        // 将每个对象的sampleid和cbyfid等属性设置为样方1第一个对象相应的值
        this.formData[0].shrubYfList[0][i].sampleid =
          this.formData[0].shrubYfList[0][0].sampleid;
        this.formData[0].shrubYfList[0][i].gmyfid =
          this.formData[0].shrubYfList[0][0].gmyfid;
        this.formData[0].shrubYfList[0][i].gaoduavg =
          this.formData[0].shrubYfList[0][0].gaoduavg;
        this.formData[0].shrubYfList[0][i].area =
          this.formData[0].shrubYfList[0][0].area;
        this.formData[0].shrubYfList[0][i].zgdavg =
          this.formData[0].shrubYfList[0][0].agdavg;
        this.formData[0].shrubYfList[0][i].jlr =
          this.formData[0].shrubYfList[0][0].jlr;
        this.formData[0].shrubYfList[0][i].jgzpbh =
          this.formData[0].shrubYfList[0][0].jgzpbh;
        this.formData[0].shrubYfList[0][i].yfzpbh =
          this.formData[0].shrubYfList[0][0].yfzpbh;
        this.formData[0].shrubYfList[0][i].zywzzpbh =
          this.formData[0].shrubYfList[0][0].zywzzpbh;
        this.formData[0].shrubYfList[0][i].wzzpbh =
          this.formData[0].shrubYfList[0][0].wzzpbh;
        this.formData[0].shrubYfList[0][i].riqi =
          this.formData[0].shrubYfList[0][0].riqi;
        this.formData[0].shrubYfList[0][i].remark =
          this.formData[0].shrubYfList[0][0].remark;
      }
      for (let i = 1; i < this.formData[0].shrubYfList[1].length; i++) {
        // 将每个对象的sampleid和cbyfid等属性设置为样方1第一个对象相应的值
        this.formData[0].shrubYfList[1][i].sampleid =
          this.formData[0].shrubYfList[1][0].sampleid;
        this.formData[0].shrubYfList[1][i].gmyfid =
          this.formData[0].shrubYfList[1][0].gmyfid;
        this.formData[0].shrubYfList[1][i].gaoduavg =
          this.formData[0].shrubYfList[1][0].gaoduavg;
        this.formData[0].shrubYfList[1][i].area =
          this.formData[0].shrubYfList[1][0].area;
        this.formData[0].shrubYfList[1][i].zgdavg =
          this.formData[0].shrubYfList[1][0].zgdavg;
        this.formData[0].shrubYfList[1][i].jlr =
          this.formData[0].shrubYfList[1][0].jlr;
        this.formData[0].shrubYfList[1][i].jgzpbh =
          this.formData[0].shrubYfList[1][0].jgzpbh;
        this.formData[0].shrubYfList[1][i].yfzpbh =
          this.formData[0].shrubYfList[1][0].yfzpbh;
        this.formData[0].shrubYfList[1][i].zywzzpbh =
          this.formData[0].shrubYfList[1][0].zywzzpbh;
        this.formData[0].shrubYfList[1][i].wzzpbh =
          this.formData[0].shrubYfList[1][0].wzzpbh;
        this.formData[0].shrubYfList[1][i].riqi =
          this.formData[0].shrubYfList[1][0].riqi;
        this.formData[0].shrubYfList[1][i].remark =
          this.formData[0].shrubYfList[1][0].remark;
      }
      for (let i = 1; i < this.formData[0].shrubYfList[2].length; i++) {
        // 将每个对象的sampleid和cbyfid等属性设置为样方1第一个对象相应的值
        this.formData[0].shrubYfList[2][i].sampleid =
          this.formData[0].shrubYfList[2][0].sampleid;
        this.formData[0].shrubYfList[2][i].gmyfid =
          this.formData[0].shrubYfList[2][0].gmyfid;
        this.formData[0].shrubYfList[2][i].gaoduavg =
          this.formData[0].shrubYfList[2][0].gaoduavg;
        this.formData[0].shrubYfList[2][i].area =
          this.formData[0].shrubYfList[2][0].area;
        this.formData[0].shrubYfList[2][i].zgdavg =
          this.formData[0].shrubYfList[2][0].zgdavg;
        this.formData[0].shrubYfList[2][i].jlr =
          this.formData[0].shrubYfList[2][0].jlr;
        this.formData[0].shrubYfList[2][i].jgzpbh =
          this.formData[0].shrubYfList[2][0].jgzpbh;
        this.formData[0].shrubYfList[2][i].yfzpbh =
          this.formData[0].shrubYfList[2][0].yfzpbh;
        this.formData[0].shrubYfList[2][i].zywzzpbh =
          this.formData[0].shrubYfList[2][0].zywzzpbh;
        this.formData[0].shrubYfList[2][i].wzzpbh =
          this.formData[0].shrubYfList[2][0].wzzpbh;
        this.formData[0].shrubYfList[2][i].riqi =
          this.formData[0].shrubYfList[2][0].riqi;
        this.formData[0].shrubYfList[2][i].remark =
          this.formData[0].shrubYfList[2][0].remark;
      }
      for (let i = 1; i < this.formData[0].arborYfList[0].length; i++) {
        // 将每个对象的sampleid和cbyfid等属性设置为样方1第一个对象相应的值
        this.formData[0].arborYfList[0][i].sampleid =
          this.formData[0].arborYfList[0][0].sampleid;
        this.formData[0].arborYfList[0][i].qmyfid =
          this.formData[0].arborYfList[0][0].qmyfid;
        this.formData[0].arborYfList[0][i].gaoduavg =
          this.formData[0].arborYfList[0][0].gaoduavg;
        this.formData[0].arborYfList[0][i].area =
          this.formData[0].arborYfList[0][0].area;
        this.formData[0].arborYfList[0][i].zgdavg =
          this.formData[0].arborYfList[0][0].zgdavg;
        this.formData[0].arborYfList[0][i].jlr =
          this.formData[0].arborYfList[0][0].jlr;
        this.formData[0].arborYfList[0][i].meimujance =
          this.formData[0].arborYfList[0][0].meimujance;
        this.formData[0].arborYfList[0][i].jgzpbh =
          this.formData[0].arborYfList[0][0].jgzpbh;
        this.formData[0].arborYfList[0][i].yfzpbh =
          this.formData[0].arborYfList[0][0].yfzpbh;
        this.formData[0].arborYfList[0][i].zywzzpbh =
          this.formData[0].arborYfList[0][0].zywzzpbh;
        this.formData[0].arborYfList[0][i].wzzpbh =
          this.formData[0].arborYfList[0][0].wzzpbh;
        this.formData[0].arborYfList[0][i].riqi =
          this.formData[0].arborYfList[0][0].riqi;
        this.formData[0].arborYfList[0][i].remark =
          this.formData[0].arborYfList[0][0].remark;
      }
      for (let i = 1; i < this.formData[0].arborYfList[1].length; i++) {
        // 将每个对象的sampleid和cbyfid等属性设置为样方1第一个对象相应的值
        this.formData[0].arborYfList[1][i].sampleid =
          this.formData[0].arborYfList[1][0].sampleid;
        this.formData[0].arborYfList[1][i].qmyfid =
          this.formData[0].arborYfList[1][0].qmyfid;
        this.formData[0].arborYfList[1][i].gaoduavg =
          this.formData[0].arborYfList[1][0].gaoduavg;
        this.formData[0].arborYfList[1][i].area =
          this.formData[0].arborYfList[1][0].area;
        this.formData[0].arborYfList[1][i].zgdavg =
          this.formData[0].arborYfList[1][0].zgdavg;
        this.formData[0].arborYfList[1][i].jlr =
          this.formData[0].arborYfList[1][0].jlr;
        this.formData[0].arborYfList[1][i].meimujance =
          this.formData[0].arborYfList[1][0].meimujance;
        this.formData[0].arborYfList[1][i].jgzpbh =
          this.formData[0].arborYfList[1][0].jgzpbh;
        this.formData[0].arborYfList[1][i].yfzpbh =
          this.formData[0].arborYfList[1][0].yfzpbh;
        this.formData[0].arborYfList[1][i].zywzzpbh =
          this.formData[0].arborYfList[1][0].zywzzpbh;
        this.formData[0].arborYfList[1][i].wzzpbh =
          this.formData[0].arborYfList[1][0].wzzpbh;
        this.formData[0].arborYfList[1][i].riqi =
          this.formData[0].arborYfList[1][0].riqi;
        this.formData[0].arborYfList[1][i].remark =
          this.formData[0].arborYfList[1][0].remark;
      }
      for (let i = 1; i < this.formData[0].arborYfList[2].length; i++) {
        // 将每个对象的sampleid和cbyfid等属性设置为样方1第一个对象相应的值
        this.formData[0].arborYfList[2][i].sampleid =
          this.formData[0].arborYfList[2][0].sampleid;
        this.formData[0].arborYfList[2][i].qmyfid =
          this.formData[0].arborYfList[2][0].qmyfid;
        this.formData[0].arborYfList[2][i].gaoduavg =
          this.formData[0].arborYfList[2][0].gaoduavg;
        this.formData[0].arborYfList[2][i].area =
          this.formData[0].arborYfList[2][0].area;
        this.formData[0].arborYfList[2][i].zgdavg =
          this.formData[0].arborYfList[2][0].zgdavg;
        this.formData[0].arborYfList[2][i].jlr =
          this.formData[0].arborYfList[2][0].jlr;
        this.formData[0].arborYfList[2][i].meimujance =
          this.formData[0].arborYfList[2][0].meimujance;
        this.formData[0].arborYfList[2][i].jgzpbh =
          this.formData[0].arborYfList[2][0].jgzpbh;
        this.formData[0].arborYfList[2][i].yfzpbh =
          this.formData[0].arborYfList[2][0].yfzpbh;
        this.formData[0].arborYfList[2][i].zywzzpbh =
          this.formData[0].arborYfList[2][0].zywzzpbh;
        this.formData[0].arborYfList[2][i].wzzpbh =
          this.formData[0].arborYfList[2][0].wzzpbh;
        this.formData[0].arborYfList[2][i].riqi =
          this.formData[0].arborYfList[2][0].riqi;
        this.formData[0].arborYfList[2][i].remark =
          this.formData[0].arborYfList[2][0].remark;
      }
    },
    // 草本数据复原
    herbsDataRecover(data) {
      const restoredData = data.reduce((acc, current) => {
        current.list.forEach(subItem => {
          acc.push({
            originalPlotId: current.originalPlotId,
            herbQuadratId: current.herbQuadratId,
            quadratRecorder: current.quadratRecorder,
            quadratAreaM2: current.quadratAreaM2,
            totalCoveragePct: current.totalCoveragePct,
            layerHeightCm: current.layerHeightCm,
            abundanceLevel: current.abundanceLevel,
            notes: current.notes,
            surveyYear: current.surveyYear,
            ecosystemType: current.ecosystemType,
            projectLeader: current.projectLeader,
            photoId: current.photoId,
            ...subItem
          });
        });
        return acc;
      }, []);
      return restoredData;
    },
    // 灌木数据复原
    shrubsDataRecover(data) {
      const restoredData = data.reduce((acc, current) => {
        current.list.forEach(subItem => {
          acc.push({
            originalPlotId: current.originalPlotId,
            shrubQuadratId: current.shrubQuadratId,
            quadratRecorder: current.quadratRecorder,
            quadratArea: current.quadratArea,
            totalCoveragePct: current.totalCoveragePct,
            layerHeightCm: current.layerHeightCm,
            surveyYear: current.surveyYear,
            ecosystemType: current.ecosystemType,
            projectLeader: current.projectLeader,
            photoId: current.photoId,
            ...subItem
          });
        });
        return acc;
      }, []);
      return restoredData;
    },
    // 乔木数据复原
    treesDataRecover(data) {
      const restoredData = data.reduce((acc, current) => {
        current.list.forEach(subItem => {
          acc.push({
            originalPlotId: current.originalPlotId,
            treeQuadratId: current.treeQuadratId,
            quadratRecorder: current.quadratRecorder,
            quadratArea: current.quadratArea,
            totalCoveragePct: current.totalCoveragePct,
            layerHeightCm: current.layerHeightCm,
            measurementStandard: current.measurementStandard,
            surveyYear: current.surveyYear,
            ecosystemType: current.ecosystemType,
            projectLeader: current.projectLeader,
            photoId: current.photoId,
            ...subItem
          });
        });
        return acc;
      }, []);
      return restoredData;
    },
    // 处理提交按钮的点击事件
    async submitData() {
      let herbslist = this.ndPlots.herbLayer == '是' ? this.herbsDataRecover(this.ndHerbsList) : null;
      let shrubslist = this.ndPlots.shrubLayer == '是' ? this.shrubsDataRecover(this.ndShrubsList) : null;
      let treeslist = this.ndPlots.treeLayer == '是' ? this.treesDataRecover(this.ndTreesList) : null;
      console.log(herbslist);
      console.log(shrubslist);
      console.log(treeslist)
      let data = {
        id: this.$route.params.id,
        ndPlots: this.ndPlots,
        ndHerbsList: herbslist,
        ndShrubsList: shrubslist,
        ndTreesList: treeslist,
      }
      const pattern = /^\d+[\*xX×]\d+$/;
      if (!this.ndPlots.originalPlotId) {
        Message({
          message: "请填写样地编号！",
          type: "error",
        });
        return;
      }
      if (this.ndPlots.herbLayer == '是') {
        if (this.ndHerbsList.length == 0) {
          Message({
            message: "请填写草本样方信息！",
            type: "error",
          });
          return;
        }
        for (let i = 0; i < this.ndHerbsList.length; i++) {
          const element = this.ndHerbsList[i];
          if (!element.herbQuadratId) {
            Message({
              message: "请填写草本样方编号！",
              type: "error",
            });
            return;
          }
          if (!pattern.test(element.quadratAreaM2)) {
            Message({
              message: "请正确填写草本样方面积！",
              type: "error",
            });
            return;
          }
        }
      }
      if (this.ndPlots.shrubLayer == '是') {
        if (this.ndShrubsList.length == 0) {
          Message({
            message: "请填写灌木样方信息！",
            type: "error",
          });
          return;
        }
        for (let i = 0; i < this.ndShrubsList.length; i++) {
          const element = this.ndShrubsList[i];
          if (!element.shrubQuadratId) {
            Message({
              message: "请填写灌木样方编号！",
              type: "error",
            });
            return;
          }
          if (!pattern.test(element.quadratArea)) {
            Message({
              message: "请正确填写灌木样方面积！",
              type: "error",
            });
            return;
          }
        }
      }
      if (this.ndPlots.treeLayer == '是') {
        if (this.ndTreesList.length == 0) {
          Message({
            message: "请填写乔木样方信息！",
            type: "error",
          });
          return;
        }
        for (let i = 0; i < this.ndTreesList.length; i++) {
          const element = this.ndTreesList[i];
          if (!element.treeQuadratId) {
            Message({
              message: "请填写乔木样方编号！",
              type: "error",
            });
            return;
          }
          if (!pattern.test(element.quadratArea)) {
            Message({
              message: "请正确填写乔木样方面积！",
              type: "error",
            });
            return;
          }
        }
      }
      if (this.button === "新增数据") {
        this.saveData(); // 调用新增数据的接口
      } else if (this.button === "修改数据") {

        this.updateData(data); // 调用修改数据的接口
      }
    },
    // 新增数据
    async createData() {
      console.log("所有的数据", this.formData);
      // return
      // 执行新增数据的接口逻辑
      // console.log('调用新增数据的接口');
      let params = {
        id: null,
        ndPlots: this.ndPlots,
        ndHerbsList: this.ndHerbsList,
        ndShrubsList: this.ndShrubsList,
        ndTreesList: this.ndTreesList
      }
      try {
        // this.prepareBackendData();
        // 调用接口，传递 this.formData

        this.$api
          .addPlot(params)
          .then((response) => {
            if (response.data.code === 0) {
              // 处理接口返回的数据或其他逻辑
              console.log("新增成功", response);
              // 弹框提示用户新增成功
              // 弹框提示用户新增成功，蓝色（一般信息）
              Message({
                message: "新增成功",
                type: "info",
                duration: 3000, // 持续时间，单位毫秒
              });
              // this.refreshPage();
              this.goBack();
            } else if (response.data.code === -1) {
              Message({
                message: "新增失败，服务端异常",
                type: "error",
                duration: 3000,
              });
            }
          })
          .catch((error) => {
            // 处理失败的情况
            console.error("失败:", error);
            // 弹框提示用户新增失败，红色[;;]
            Message({
              message: "新增失败，请重试",
              type: "error",
              duration: 3000,
            });
          });
      } catch (error) {
        // 处理错误
        console.error("新增失败", error);
      }
    },
    // 修改数据
    async updateData(data) {
      // 执行修改数据的接口逻辑
      console.log("调用修改数据的接口");
      try {


        this.$api
          .editPlot(data)
          .then((response) => {
            if (response.data.code === 0) {
              // 处理接口返回的数据或其他逻辑
              console.log("修改成功", response);
              // 弹框提示用户新增成功
              // 弹框提示用户新增成功，蓝色（一般信息）
              Message({
                message: "修改成功",
                type: "info",
                duration: 3000, // 持续时间，单位毫秒
              });
              this.goBack();
              // this.refreshPage();
            }
          })
          .catch((error) => {
            // 处理失败的情况
            console.error("失败:", error);
            // 弹框提示用户新增失败，红色[;;]
            Message({
              message: "修改失败，请重试",
              type: "error",
              duration: 3000,
            });
          });
      } catch (error) {
        // 处理错误
        console.error("修改失败", error);
      }
    },
    // 校验
    validateForm() {
      // 手动验证表单项
      // console.log("验证", this.formData[0].sampleInfo.sampleid);
      const sampleIdValid =
        this.formData[0].sampleInfo.sampleid !== "" &&
        this.formData[0].sampleInfo.sampleid !== null;
      const longitudeValid =
        this.formData[0].sampleInfo.lon !== "" &&
        this.formData[0].sampleInfo.lon !== null;
      const latitudeValid =
        this.formData[0].sampleInfo.lat !== "" &&
        this.formData[0].sampleInfo.lat !== null;

      // 返回表单整体是否验证通过
      return sampleIdValid && longitudeValid && latitudeValid;
    },

    async querySearchAsync(itemWzm, cb) {
      try {
        if (itemWzm) {
          const response = await this.$api.queryWzm(itemWzm);
          console.log("根据物种名查拉丁名", response.data.data);

          const result = response.data.data;
          // 构造建议的数据，使用数组包裹对象，每个对象包含 label 和 value 字段
          const suggestions = result.map((item) => ({
            label: item.wzmc,
            value: item.xmc,
          }));
          console.log("suggestions ", suggestions);
          cb(suggestions);
        } else {
          cb([]);
        }
      } catch (error) {
        console.error("Error fetching suggestions:", error);
        cb([]);
      }
    },
    handleSelect(event, selectedItem) {
      console.log(event, selectedItem);
      // 更新物种名和拉丁名

      selectedItem.wzm = event.label;
      selectedItem.ldm = event.value;
    },

    // updateZpbh(list, listIndex, itemIndex, fileName) {
    //   console.log(list, listIndex, itemIndex, fileName);
    //   if (!isNaN(listIndex) && !isNaN(itemIndex)) {
    //     const speciesList = list[listIndex];
    //     const foundSpecies = speciesList[itemIndex];

    //     if (foundSpecies) {
    //       // 如果 zpbh 不为空，则追加 fileName；否则，将其设置为当前
    //       foundSpecies.zpbh = foundSpecies.zpbh
    //         ? `${foundSpecies.zpbh},${fileName}`
    //         : fileName;
    //       foundSpecies.zpbh = foundSpecies.zpbh.replace(/,+$/, "");
    //     }
    //   }
    // },
    updateZpbh(list, listIndex, itemIndex, field, fileName) {
      console.log(list, listIndex, itemIndex, field, fileName);
      if (!isNaN(listIndex) && !isNaN(itemIndex)) {
        const speciesList = list[listIndex];
        const foundSpecies = speciesList[itemIndex];

        if (foundSpecies) {
          // 如果对应字段不为空，则追加 fileName；否则，将其设置为当前
          foundSpecies[field] = foundSpecies[field]
            ? `${foundSpecies[field]},${fileName}`
            : fileName;
          foundSpecies[field] = foundSpecies[field].replace(/,+$/, "");
        }
      }
    },

    //   handleUploadSuccess(uploadInfo) {
    // console.log('uploadInfo',uploadInfo)

    //     const dcblx = uploadInfo.dcblx;

    //     // 根据 dcblx 调用 updateZpbh 函数
    //     if (dcblx.startsWith("cb")) {
    //       const lastTwoDigits = dcblx.slice(-2); // 提取后两位数字
    //       const listIndex = parseInt(lastTwoDigits) - 1;

    //       if (!isNaN(listIndex) && listIndex >= 0) {
    //         this.updateZpbh(
    //           this.formData[0].herbYfList,
    //           listIndex,
    //           0, // Assuming itemIndex is always 0 based on your requirements
    //           uploadInfo.fileName
    //         );
    //       }
    //     } else if (dcblx.startsWith("gm")) {
    //       const lastTwoDigits = dcblx.slice(-2); // 提取后两位数字
    //       const listIndex = parseInt(lastTwoDigits) - 1;

    //       if (!isNaN(listIndex) && listIndex >= 0) {
    //         this.updateZpbh(
    //           this.formData[0].shrubYfList,
    //           listIndex,
    //           0,
    //           uploadInfo.fileName
    //         );
    //       }
    //     } else if (dcblx.startsWith("qm")) {
    //       const lastTwoDigits = dcblx.slice(-2); // 提取后两位数字
    //       const listIndex = parseInt(lastTwoDigits) - 1;

    //       if (!isNaN(listIndex) && listIndex >= 0) {
    //         this.updateZpbh(
    //           this.formData[0].arborYfList,
    //           listIndex,
    //           0,
    //           uploadInfo.fileName
    //         );
    //       }
    //     } else if (dcblx.startsWith("yd")) {
    //       console.log("aaaaaaaa", uploadInfo);
    //       console.log(this.formData[0].sampleInfo.zpbh);

    //       if (this.formData[0].sampleInfo) {
    //         // 如果 zpbh 不为空，则追加 fileName；否则，将其设置为当前
    //         this.formData[0].sampleInfo.zpbh = this.formData[0].sampleInfo.zpbh
    //           ? `${this.formData[0].sampleInfo.zpbh},${uploadInfo.fileName}`
    //           : uploadInfo.fileName;
    //         this.formData[0].sampleInfo.zpbh =
    //           this.formData[0].sampleInfo.zpbh.replace(/,+$/, "");
    //         // console.log('bbbbbbbbb',this.formData[0].sampleInfo.zpbh);
    //       }
    //     } else if (dcblx.startsWith("tr")) {
    //       // console.log('aaaaaaaa',uploadInfo)
    //       if (this.formData[0].soilCd[0]) {
    //         // 如果 zpbh 不为空，则追加 fileName；否则，将其设置为当前
    //         this.formData[0].soilCd[0].zpbh = this.formData[0].soilCd[0].zpbh
    //           ? `${this.formData[0].soilCd[0].zpbh},${uploadInfo.fileName}`
    //           : uploadInfo.fileName;
    //         this.formData[0].soilCd[0].zpbh =
    //           this.formData[0].soilCd[0].zpbh.replace(/,+$/, "");
    //         // console.log('bbbbbbbbb',this.formData[0].soilCd.zpbh);
    //       }
    //     }
    //     // 如果有其他条件，可以添加相应的判断
    //   },
    handleUploadSuccess(uploadInfo, obj) {
      console.log('123456', obj)
      let array = obj.photoId?.split(',') || [];
      array.push(uploadInfo.fileName)
      obj.photoId = array.join(',');
      console.log(this.ndHerbsList, obj.photoId)
    },

    // handleDeleteImage(payload) {
    //   const { dcblx, fileName } = payload;
    //   // 在这里执行删除图片的逻辑，可以调用后端接口删除服务器上的文件等
    //   // console.log(`父组件收到删除事件，文件名：${dcblx}，${fileName}`);
    //   if (dcblx.startsWith("cb")) {
    //     const lastTwoDigits = dcblx.slice(-2); // 提取后两位数字
    //     const listIndex = parseInt(lastTwoDigits) - 1;

    //     if (!isNaN(listIndex) && listIndex >= 0) {
    //       this.deleteZpbh(
    //         this.formData[0].herbYfList,
    //         listIndex,
    //         0, // Assuming itemIndex is always 0 based on your requirements
    //         fileName
    //       );
    //     }
    //   } else if (dcblx.startsWith("gm")) {
    //     const lastTwoDigits = dcblx.slice(-2); // 提取后两位数字
    //     const listIndex = parseInt(lastTwoDigits) - 1;

    //     if (!isNaN(listIndex) && listIndex >= 0) {
    //       this.deleteZpbh(this.formData[0].shrubYfList, listIndex, 0, fileName);
    //     }
    //   } else if (dcblx.startsWith("qm")) {
    //     const lastTwoDigits = dcblx.slice(-2); // 提取后两位数字
    //     const listIndex = parseInt(lastTwoDigits) - 1;

    //     if (!isNaN(listIndex) && listIndex >= 0) {
    //       this.deleteZpbh(this.formData[0].arborYfList, listIndex, 0, fileName);
    //     }
    //   } else if (dcblx.startsWith("yd")) {
    //     console.log("样地");

    //     if (this.formData[0].sampleInfo) {
    //       // 将需要删除的文件名从 zpbh 中去除
    //       if (this.formData[0].sampleInfo.zpbh) {
    //         const fileNames = this.formData[0].sampleInfo.zpbh.split(",");
    //         const updatedFileNames = fileNames.filter(
    //           (name) => name !== fileName
    //         );
    //         this.formData[0].sampleInfo.zpbh = updatedFileNames.join(",");
    //       }
    //       // 去除多余的逗号
    //       this.formData[0].sampleInfo.zpbh =
    //         this.formData[0].sampleInfo.zpbh.replace(/,+$/, "");
    //     }

    //     // if (!isNaN(listIndex) && listIndex >= 0) {
    //     //   this.deleteZpbh(this.formData[0].sampleInfo, listIndex, 0, fileName);
    //     // }
    //   } else if (dcblx.startsWith("tr")) {
    //     console.log("土壤");

    //     if (this.formData[0].soilCd[0]) {
    //       // 将需要删除的文件名从 zpbh 中去除
    //       if (this.formData[0].soilCd[0].zpbh) {
    //         const fileNames = this.formData[0].soilCd[0].zpbh.split(",");
    //         const updatedFileNames = fileNames.filter(
    //           (name) => name !== fileName
    //         );
    //         this.formData[0].soilCd[0].zpbh = updatedFileNames.join(",");
    //       }
    //       // 去除多余的逗号
    //       this.formData[0].soilCd[0].zpbh =
    //         this.formData[0].soilCd[0].zpbh.replace(/,+$/, "");
    //     }
    //   }
    // },
    handleDeleteImage(uploadInfo, obj) {
      let array = obj.photoId?.split(',') || [];
      array.splice(uploadInfo, 1)
      obj.photoId = array.join(',');
      console.log(this.ndHerbsList, obj.photoId)
    },

    // deleteZpbh(list, listIndex, itemIndex, fileName) {
    //   if (!isNaN(listIndex) && !isNaN(itemIndex)) {
    //     const speciesList = list[listIndex];
    //     const foundSpecies = speciesList[itemIndex];

    //     if (foundSpecies) {
    //       // 将需要删除的文件名从 zpbh 中去除
    //       if (foundSpecies.zpbh) {
    //         const fileNames = foundSpecies.zpbh.split(",");
    //         const updatedFileNames = fileNames.filter(
    //           (name) => name !== fileName
    //         );
    //         foundSpecies.zpbh = updatedFileNames.join(",");
    //       }
    //       // 去除多余的逗号
    //       foundSpecies.zpbh = foundSpecies.zpbh.replace(/,+$/, "");
    //     }
    //   }
    // },
    deleteZpbh(list, listIndex, itemIndex, field, fileName) {
      if (!isNaN(listIndex) && !isNaN(itemIndex)) {
        const speciesList = list[listIndex];
        const foundSpecies = speciesList[itemIndex];

        if (foundSpecies) {
          // 将需要删除的文件名从对应字段中去除
          if (foundSpecies[field]) {
            const fileNames = foundSpecies[field].split(",");
            const updatedFileNames = fileNames.filter(
              (name) => name !== fileName
            );
            foundSpecies[field] = updatedFileNames.join(",");
          }
          // 去除多余的逗号
          foundSpecies[field] = foundSpecies[field].replace(/,+$/, "");
        }
      }
    },

    renderForm() {
      // 渲染地形地貌
      this.handleDxDmChange(this.formData[0].sampleInfo.dxdmdm);

      // 渲染坡向
      this.handlePxChange(this.formData[0].sampleInfo.pxdm);

      // 渲染坡位
      this.handlePwChange(this.formData[0].sampleInfo.pwdm);

      // 渲染土壤类型
      this.handleTrlxChange(this.formData[0].sampleInfo.trlxdm);
      // 渲染植被类型
      this.handleZblxChange(this.formData[0].sampleInfo.zblxdm);
      // 凋落物
      this.handleDlwChange(this.formData[0].sampleInfo.dlwdm);
      // 风蚀
      this.handleFsChange(this.formData[0].sampleInfo.fsdm);
      // 砾石
      this.handleLsChange(this.formData[0].sampleInfo.lsdm);

      this.handleLkChange(this.formData[0].sampleInfo.lkdm);
      this.handleFushaChange(this.formData[0].sampleInfo.fushadm);
      this.handleSsChange(this.formData[0].sampleInfo.ssdm);
      this.handleYjbChange(this.formData[0].sampleInfo.yjbdm);
      this.handleLyfsChange(this.formData[0].sampleInfo.lyfsdm);
      this.handleLycdChange(this.formData[0].sampleInfo.lycddm);
      // 根据已有的xzqhcode设置Cascader的值
      //  const selectedOption = this.findSelectedOption(this.xzqhOptions, this.formData[0].sampleInfo.xzqhcode);
      // if (selectedOption) {
      //   this.selectedXzqh = selectedOption.value;
      //   this.formData[0].sampleInfo.xzqhname = selectedOption.label;
      // }
    },
    // 新增地形地貌dm
    handleDxDmChange(newDxdmdm) {
      const selectedOption = this.dxDmOptions.find(
        (option) => option.value === newDxdmdm
      );
      if (selectedOption) {
        this.formData[0].sampleInfo.dxdm = selectedOption.label;
      }
    },
    // 新增坡向dm
    handlePxChange(newPxdm) {
      const selectedOption = this.pxOptions.find(
        (option) => option.value === newPxdm
      );
      if (selectedOption) {
        this.formData[0].sampleInfo.px = selectedOption.label;
      }
    },
    // 新增坡位dm
    handlePwChange(newPwdm) {
      const selectedOption = this.pwOptions.find(
        (option) => option.value === newPwdm
      );
      if (selectedOption) {
        this.formData[0].sampleInfo.pw = selectedOption.label;
      }
    },
    // 处理土壤类型代码和名称的对应
    handleTrlxChange(newTrlxdm) {
      const selectedOption = this.trlxOptions.find(
        (option) => option.value === newTrlxdm
      );
      if (selectedOption) {
        this.formData[0].sampleInfo.trlx = selectedOption.label;
      }
    },
    // 新增植被类型dm
    handleZblxChange(newZblxdm) {
      const selectedOption = this.zblxOptions.find(
        (option) => option.value === newZblxdm
      );
      if (selectedOption) {
        this.formData[0].sampleInfo.zblx = selectedOption.label;
      }
    },
    handleDlwChange(newDlwdm) {
      console.log("99999999999", newDlwdm);

      const selectedOption = this.dlwOptions.find(
        (option) => option.value === newDlwdm
      );
      if (selectedOption) {
        this.formData[0].sampleInfo.dlw = selectedOption.label;
      }
    },
    handleFsChange(newFsdm) {
      const selectedOption = this.fsOptions.find(
        (option) => option.value === newFsdm
      );
      if (selectedOption) {
        this.formData[0].sampleInfo.fs = selectedOption.label;
      }
    },
    handleLsChange(newLsdm) {
      const selectedOption = this.lsOptions.find(
        (option) => option.value === newLsdm
      );
      if (selectedOption) {
        this.formData[0].sampleInfo.ls = selectedOption.label;
      }
    },
    // 立枯处理
    handleLkChange(newLkdm) {
      const selectedOption = this.lkOptions.find((option) => option.value === newLkdm);
      if (selectedOption) {
        this.formData[0].sampleInfo.lk = selectedOption.label;
      }
    },
    // 覆沙处理
    handleFushaChange(newFushadm) {
      const selectedOption = this.fushaOptions.find((option) => option.value === newFushadm);
      if (selectedOption) {
        this.formData[0].sampleInfo.fusha = selectedOption.label;
      }
    },
    // 水蚀处理
    handleSsChange(newSsdm) {
      const selectedOption = this.ssOptions.find((option) => option.value === newSsdm);
      if (selectedOption) {
        this.formData[0].sampleInfo.ss = selectedOption.label;
      }
    },
    // 盐碱斑处理
    handleYjbChange(newYjbdm) {
      const selectedOption = this.yjbOptions.find((option) => option.value === newYjbdm);
      if (selectedOption) {
        this.formData[0].sampleInfo.yjb = selectedOption.label;
      }
    },
    // 利用方式处理
    handleLyfsChange(newLyfsdm) {
      const selectedOption = this.lyfsOptions.find((option) => option.value === newLyfsdm);
      if (selectedOption) {
        this.formData[0].sampleInfo.lyfs = selectedOption.label;
      }
    },
    // 利用程度处理
    handleLycdChange(newLycddm) {
      const selectedOption = this.lycdOptions.find((option) => option.value === newLycddm);
      if (selectedOption) {
        this.formData[0].sampleInfo.lycd = selectedOption.label;
      }
    },
    // 根据xzqhcode设置selectedXZQH
    //  setInitialXZQH() {
    //   const xzqhcode = this.formData[0].sampleInfo.xzqhcode;
    //   if (xzqhcode) {
    //     const path = this.findXZQHPath(this.config.xzqhArray, xzqhcode);
    //     if (path.length > 0) {
    //       this.selectedXZQH = path.map((node) => node.value);
    //     }
    //   }
    // },
    // 递归查找xzqhcode的路径
    // findXZQHPath(nodes, code, path = []) {
    //   for (const node of nodes) {
    //     const currentPath = [...path, node];
    //     if (node.value === code) {
    //       return currentPath;
    //     }
    //     if (node.children) {
    //       const childPath = this.findXZQHPath(node.children, code, currentPath);
    //       if (childPath.length > 0) {
    //         return childPath;
    //       }
    //     }
    //   }
    //   return [];
    // },
    //   setInitialXZQH() {
    //   const initialCode = this.formData[0].sampleInfo.xzqhcode;
    //   console.log('initialCode',initialCode);

    //   if (initialCode) {
    //     this.selectedXZQH = initialCode;
    //   }
    // },
    // handleXZQHChange(selectedPath) {

    //   console.log('333333',selectedPath);

    //   if (selectedPath.length > 0) {
    //     console.log('进来了');

    //     // const selectedNode = selectedPath[selectedPath.length - 1];

    //     const selectedNode = this.findNodeByValue(config.xzqhArray, selectedPath);
    //     console.log('selectedNode',selectedNode);
    //     this.formData[0].sampleInfo.xzqhname = selectedNode ? selectedNode.label : '';
    //     this.formData[0].sampleInfo.xzqhcode = selectedNode ? selectedNode.value : '';


    //     this.formData[0].sampleInfo.xzqhname = selectedNode.label;
    //     this.formData[0].sampleInfo.xzqhcode = selectedNode.value;
    //   } else {
    //     this.formData[0].sampleInfo.xzqhname = "";
    //     this.formData[0].sampleInfo.xzqhcode = "";
    //   }
    // },


    // findNodeByValue(options, value) {
    //   for (let i = 0; i < options.length; i++) {
    //     const node = options[i];
    //     if (node.value === value) {
    //       return node;
    //     } else if (node.children) {
    //       const found = this.findNodeByValue(node.children, value);
    //       if (found) return found;
    //     }
    //   }
    //   return null;
    // }
    handleXZQHChange(value) {
      this.formData[0].sampleInfo.xzqhcode = value;
      const selectedOption = this.findLabelByValue(config.xzqhArray, value);
      if (selectedOption) {
        this.formData[0].sampleInfo.xzqhname = selectedOption.label;
      }
    },
    findLabelByValue(options, value) {
      for (const option of options) {
        if (option.value === value) {
          return option;
        } else if (option.children) {
          const childResult = this.findLabelByValue(option.children, value);
          if (childResult) {
            return childResult;
          }
        }
      }
      return null;
    },
    handherbs() {
      const date = new Date(this.ndPlots.surveyDate)
      const year = date.getFullYear().toString();
      this.ndHerbsList.push({
        id: null,
        plotId: null,
        originalPlotId: this.a,
        herbQuadratId: null,
        quadratRecorder: null,
        quadratAreaM2: null,
        totalCoveragePct: null,
        layerHeightCm: null,
        list: [{
          speciesField: null,
          chineseName: null,
          latinNameField: null,
          reproductiveBranchHeightCm: null,
          vegetativeBranchHeightCm: null,
          partialCoveragePct: null,
          clusterCount: null,
          biomassFreshGM2: null,
          biomassDryGM2: null,
        }],
        abundanceLevel: null,
        notes: null,
        photoId: null,
        surveyYear: year,
        ecosystemType: null,
        subProjectLeader: null,
      });
    },
    handshrubs() {
      const date = new Date(this.ndPlots.surveyDate)
      const year = date.getFullYear().toString();
      this.ndShrubsList.push({
        id: null,
        plotId: null,
        newPlotId: null,
        originalPlotId: this.a,
        shrubQuadratId: null,
        quadratRecorder: null,
        quadratArea: null,
        totalCoveragePct: null,
        layerHeightCm: null,
        list: [{
          speciesField: null,
          chineseName: null,
          latinName: null,
          plantId: null,
          averageHeightCm: null,
          stemCount: null,
          averageStemBaseDiameterCm: null,
          crownLongAxisCm: null,
          crownShortAxisCm: null,
          biomassGM2: null,
          biomassMethod: null,
          clusterCount: null,
        }],
        photoId: null,
        surveyYear: year,
        ecosystemType: null,
        projectLeader: null,
      });
    },
    handtrees() {
      const date = new Date(this.ndPlots.surveyDate)
      const year = date.getFullYear().toString();
      this.ndTreesList.push({
        id: null,
        plotId: null,
        newPlotId: null,
        originalPlotId: this.a,
        treeQuadratId: null,
        quadratRecorder: null,
        quadratArea: null,
        totalCoveragePct: null,
        layerHeightCm: null,
        measurementStandard: null,
        list: [{
          speciesField: null,
          chineseName: null,
          latinName: null,
          plantId: null,
          heightM: null,
          branchHeightM: null,
          dbhCm: null,
          circumferenceCm: null,
          crownLongAxisCm: null,
          crownShortAxisCm: null,
          biomassGM2: null,
          biomassMethod: null,
        }],
        photoId: null,
        surveyYear: year,
        ecosystemType: null,
        projectLeader: null,
      });
    },
    removeTab(name) {
      let array = name.split('_');
      if (array[0] == 'cb') {
        this.ndHerbsList.splice(parseInt(array[1]) - 1, 1);
      } else if (array[0] == 'gm') {
        this.ndShrubsList.splice(parseInt(array[1]) - 1, 1);
      } else if (array[0] == 'qm') {
        this.ndTreesList.splice(parseInt(array[1]) - 1, 1);
      }
    },
    updateSurveyYears() {
      this.surveyDate = new Date(this.ndPlots.surveyDate).getFullYear().toString();
    }
  },
  computed: {
    dxdmdmValue() {
      return this.formData[0].sampleInfo.dxdmdm;
    },
    pxdmValue() {
      return this.formData[0].sampleInfo.pxdm;
    },
    pwdmValue() {
      return this.formData[0].sampleInfo.pwdm;
    },
    trlxdmValue() {
      return this.formData[0].sampleInfo.trlxdm;
    },
    zblxdmValue() {
      return this.formData[0].sampleInfo.zblxdm;
    },
    fsdmValue() {
      return this.formData[0].sampleInfo.fsdm;
    },
    lsdmValue() {
      return this.formData[0].sampleInfo.lsdm;
    },
    lkdmValue() {
      return this.formData[0].sampleInfo.lkdm;
    },
    fushadmValue() {
      return this.formData[0].sampleInfo.fushadm;
    },
    ssdmValue() {
      return this.formData[0].sampleInfo.ssdm;
    },
    yjbdmValue() {
      return this.formData[0].sampleInfo.yjbdm;
    },
    lyfsdmValue() {
      return this.formData[0].sampleInfo.lyfsdm;
    },
    lycddmValue() {
      return this.formData[0].sampleInfo.lycddm;
    },
    syncPlotId: {
      get() {
        return this.ndPlots.originalPlotId
      },
      set(newVal) {
        this.ndHerbsList.forEach(element => {
          element.originalPlotId = newVal;
        });
        this.ndShrubsList.forEach(element => {
          element.originalPlotId = newVal;
        });
        this.ndTreesList.forEach(element => {
          element.originalPlotId = newVal;
        });
      }
    },
    surveyDate: {
      get() {
        const date = new Date(this.ndPlots.surveyDate)
        console.log('1', this.ndHerbsList)
        return date.getFullYear().toString();
      },
      set(newVal) {
        console.log(456)
        this.ndHerbsList.forEach(element => {
          element.surveyYear = newVal;
        });
        this.ndShrubsList.forEach(element => {
          element.surveyYear = newVal;
        });
        this.ndTreesList.forEach(element => {
          element.surveyYear = newVal;
        });
        console.log(this.ndHerbsList)
      }
    }
  },
  watch: {
    dxdmdmValue(newDxdmdm) {
      this.handleDxDmChange(newDxdmdm);
    },
    pxdmValue(newPxdm) {
      this.handlePxChange(newPxdm);
    },
    pwdmValue(newPwdm) {
      this.handlePwChange(newPwdm);
    },
    trlxdmValue(newTrlxdm) {
      this.handleTrlxChange(newTrlxdm);
    },
    zblxdmValue(newZblxdm) {
      this.handleZblxChange(newZblxdm);
    },
    dlwdmValue(newDlwdm) {
      this.handleDlwChange(newDlwdm);
    },
    fsdmValue(newFsdm) {
      this.handleFsChange(newFsdm);
    },
    lsdmValue(newLsdm) {
      this.handleLsChange(newLsdm);
    },
    lkdmValue(newLkdm) {
      this.handleLkChange(newLkdm);
    },
    fushadmValue(newFushadm) {
      this.handleFushaChange(newFushadm);
    },
    ssdmValue(newSsdm) {
      this.handleSsChange(newSsdm);
    },
    yjbdmValue(newYjbdm) {
      this.handleYjbChange(newYjbdm);
    },
    lyfsdmValue(newLyfsdm) {
      this.handleLyfsChange(newLyfsdm);
    },
    lycddmValue(newLycddm) {
      this.handleLycdChange(newLycddm);
    },
    'ndPlots.surveyDate'() {
      this.updateSurveyYears();
    }
  },
};
</script>
<style scoped>
body {
  overflow: hidden;
}

th {
  text-align: left;
  background-color: #fafafa;

  color: rgba(0, 0, 0, 0.85);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
}

th,
td {
  /* border: 1px solid #ddd; */
}

.el-tabs {
  padding-left: 15px;
  padding-right: 15px;
  background: rgb(255, 255, 255);
  /* height: 750px; */
  position: relative;
}

.el-tab-pane {
  margin: 0 0 0px;

  outline: none;
}

.view {
  overflow-y: scroll;
  /* height: 570px; */
  background: rgb(255, 255, 255);
  position: relative;
  overflow-y: auto;
  animation: fadeInLeft 1s 0.02s ease backwards;
}

table {
  table-layout: auto;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

tr {
  border-bottom: 1px solid #e8e8e8;
}

.table1 th,
td {
  border: 1px solid #ddd;

  padding: 10px 15px;
}

.table1 th {
  text-align: left;
  background-color: #fafafa;
  padding: 16px 12px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
}

.table td {
  text-align: center;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  line-height: 1.5;
}

.el-input__inner {
  height: 32px !important;
  line-height: 32px;
}

.btn {
  width: 100%;

  padding: 10px 16px;
  background: rgb(255, 255, 255);
  text-align: center;
}

.btn button {
  height: 32px;
  padding: 0 15px;
  font-size: 14px;
  border-radius: 4px;
}

.top {
  border: 1px solid #e8e8e8;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
}

tbody .update-image {
  float: left;
  background-color: #fafafa;
  height: 32px;
  line-height: 32px;
  text-align: center;
}

tbody .update-image span {
  padding: 0 11px;
}

.update-image1 {
  width: 90%;
  display: table-cell;
  /* border: none; */
  border-radius: none !important;
  /* border: 1px solid #DCDFE6; */
}

.jdt {
  overflow: hidden;
  display: inline-block;
  width: 100%;
  text-align: start;
  vertical-align: top;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  font-feature-settings: "tnum";
  position: relative;
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}

.table-body {
  /* overflow-x: auto; */
  overflow-x: auto;
}

.table2 th {
  padding: 16px 12px;
}

thead>tr>th {
  text-align: center;
}

.table3 {
  border: 1px solid #e8e8e8;
}

.table3 thead th {
  width: 120px;
}

.table3 th {
  padding: 8px;
  border-right: 1px solid #e8e8e8;
}

.table3 td {
  text-align: center;
}

.view1 {
  animation: fadeInLeft 1s 0.02s ease backwards;
}

.input-number-buttons {
  display: none;
}

/* el-input__decrease */
.el-input:hover .input-number-buttons {
  display: block;
}

.el-input {
  width: 100%;
  line-height: 32px;
}

/* .el-input .el-input__decrease,
.el-input .el-input__increase {
  height: auto;
  line-height: 15px;
} */
.bottom .el-input.is-controls-right .el-input__decrease,
.bottom .el-input.is-controls-right .el-input__increase {
  height: auto;
  width: 25px;
  line-height: 15px;
}

.bottom .delete {
  height: 24px;
  padding: 0 7px;
  font-size: 14px;
  border-radius: 4px;
}

.table4 td {
  text-align: center;
}

.table5 {}

.box1 {
  width: 88%;
}

.el-date-picker__editor:hover .el-range-input__icon,
.el-date-picker__editor.is-active .el-range-input__icon {
  display: none !important;
}

.el-date-picker__editor:hover .el-input__icon {
  display: none !important;
}

.addyf {
  position: absolute;
  bottom: 0;
  left: 30px;
  z-index: 10;
}
</style>
<style>
div.el-input-number .el-input__inner {
  text-align: left;
}
</style>
